JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<select name="users">
    <option value="">Select a table:</option>
    <option value="1">Appointments</option>
    <option value="2">Services</option>
    <option value="3">Status</option>
</select>
<div id="txtHint"><b>Please select a table to work with...</b></div>
<table class="hidden" id="resultTable">
    <thead>
        <tr>
            <th>Work Order Number</th>
            <th>Work Status</th>
            <th>Job Type/Stage</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<br />
<br />
<form class="hidden" name='newRow' id="newRowForm" METHOD='post' ACTION='q.php'>Status of New Entry:
    <input type='text' value='Open' name='newStatus' />
    <br>Type of Maintenance being completed:
    <input type='text' value='Software Maintenance' name='maintType' />
    <br>
    <input type='submit' value='Add' name='newEntry' />
</form>

CSS

.hidden {
    display: none;
}

JavaScript

$(function () {
    $("select[name='users']").on('change', function () {
        if ($(this).val() != "") {
            /* Can't run AJAX in example
        $.get(
          "displaySQL.php",
          {
            q: $("this").val()
          },
          function (resText) {
            // Assuming just the table body response
            $("#resultTable tbody").html(respText);
          }
        );
        */
            $("#txtHint").hide();
            $("#resultTable").show();
            $("#newRowForm").show();
        } else {
            $("#txtHint").show();
            $("#resultTable").hide();
            $("#newRowForm").hide();
        }
    });
});