JSFiddle - React, Tailwind, and code Playground

by holf

HTML

<div id="dialog">
    <form method="post">
        <input type="hidden" id="memberAsWitness" name="memberAsWitness">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Standard Witness</a>

                </li>
                <li><a href="#tabs-2">Member as Witness</a>

                </li>
            </ul>
            <div id="tabs-1">
                <div>
                    <label for="Name">Name</label>
                    <input id="Name" name="Name" type="text" value="Bob" />
                </div>
                <div>
                    <label for="WitnessSetNo">Set No.</label>
                    <input data-val="true" id="WitnessSetNo" name="WitnessSetNo" type="number" value="2" />
                </div>
            </div>
            <div id="tabs-2">
                <div> <span id="name-type-radio">
                        <input type="radio" id="name-type-short" name="name-type" value="ShortName" checked=checked/>
                        <label for="name-type-short">Short</label>
                        <input type="radio" id="name-type-shortstar" name="name-type" value="ShortStarName" />
                            <label for="name-type-shortstar">Short*</label>
                        </span>
                </div>
                <div>
                    <label for="Member">Member</label>
                    <input id="Member" name="Member" type="text" />
                </div>
                <div>
                    <label for="MemberSetNo">Set No.</label>
                    <input data-val="true" data-val-number="The field Set No. must be a number." id="MemberSetNo" name="MemberSetNo" type="number" value="2" />
                </div>
            </div>
        </div>
        <br/>
        <div class="formButtonsSet">
            <input type="submit" value="Submit" class="ui-button ui-widget ui-state-default ui-corner-all" id="EditWitnessButton" />
            <input type="button" value="Cancel"...

CSS

div {
    font-size: small;
}
label {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 5px;
}
.formButtonsSet {
    float: right;
}

#name-type-radio 
{
    margin-left: 120px;
}

#name-type-radio label
{
    width: auto;
}

JavaScript

var members = ["Mr Arbuthnot", "Kadeem Banks"];

$('#dialog').dialog({
    width: 400,
    title: "Edit Witness"
});
$("#tabs").tabs({
  activate: function( event, ui ) {
    console.log(ui);
      var selectedTab = ui.newTab.context.hash;
      if (selectedTab === "#tabs-2")
      {
          $('#memberAsWitness').val(true);
      }
      else
      {
          $('#memberAsWitness').val(false);
      }
  }
});



$("#Member").autocomplete({ source: members});