JSFiddle - React, Tailwind, and code Playground

by dekkard

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/css/bootstrap.css">
<script src="https://rawgithub.com/tarlepp/bootbox/master/bootbox.js"></script>
<div class="container">
    <button id="default" class="btn btn-default">Do it</button>
</div>

CSS

.container .btn {
    display: block;
    margin: 5px;
}

JavaScript

function ShowHub(value) {
  if (value == "159") {
    $("#HubChoose").show();
  }
  else {
  	$("#HubChoose").hide();
  }
}

// stub
var UtenteCreatore = 'whatever';

jQuery("#default").on("click", function() {
  bootbox.dialog({
    title: "This is a form in a modal.",
    message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
    '<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
    '<table>' +
        '<tr>' +
            '<th colspan="2">' +
                '<h2 class="blue">Change Dossier Status</h2>' +
            '</th>' +
        '</tr>' +
        '<tr>' +
            '<td><strong>Choose status</strong> &nbsp;&nbsp;</td>' +
            '<td><select name="Status" onchange="ShowHub(this.value);">' +
                '<option value="0">' +
                    'Under process' +
                '</option>' +
                '<option value="1">' +
                    'Under collection' +
                '</option>' +
                '<option value="2">' +
                    'Cargo collected' +
                '</option>' +
                '<option value="159">' +
                    'In Warehouse' +
                '</option>' +
                '<option value="1485">' +
                    'To Destination' +
                '</option>' +
            '</select></td>' +
        '</tr>' +
        '<tr id="HubChoose" style="display:none;">' +
            '<td>Choose hub</td>' +
            '<td><select name="Hub">' +
                '<option>' +
                    'HUB MILANO' +
                '</option>' +
            '</select></td>' +
        '</tr>' +
    '</table>' +
'</form>',
    buttons: {
      success: {
        label: "Submit",
        className: "btn-success",
        callback: function () {
        	$('#ChangeStatusDossier').submit();
          showResult("Form submitted!");
        }
      }
    },
    cancel: {
      label: "Cancel",
      className: "btn-danger",
     ...