JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<div id="dialog_success"></div>
<div id="centercontainer">
    <form id="mets_update">
    <fieldset id="orig">
    <legend class="mainlegend">Update METS Ticket <?=$t_id;?></legend>
        <fieldset>
        <legend id="general">Origination</legend>
            <label for="opened">Opened :</label>
            <input class="right_col" style="color:#000000;font-weight:bold;" id="opened" type="text" name="opened" disabled="true" readonly="readonly" value="<?=$opened;?>" />
            <label for="teo">TEO / VIPS :</label>
            <select class="right_col ui-corner-all selectStyle ui-state-default ui-widget required" disabled="true" readonly="readonly" name="ml_id" id="sel_vips">
                <option value="">Select one...</option>
            </select>
            <label for="created_by">Created By :</label>
            <select class="right_col ui-corner-all selectStyle ui-state-default ui-widget" disabled="true" readonly="readonly" name="created_by" id="sel_creator" title="Support Team Member that created this ticket">
                <option value="">Select one...</option>
            </select>
            <label for="submit_by">Requested By :</label>
            <select class="right_col ui-corner-all selectStyle ui-state-default ui-widget" disabled="true" readonly="readonly" name="submit_by" id="sel_person">
                <option value="">Select one...</option>
            </select>
            <label for="behalf_of">Additional Contact :</label>
            <select class="right_col ui-corner-all selectStyle ui-state-default ui-widget" disabled="true" readonly="readonly" name="behalf_of" id="sel_behalf" title="Any other employee that needs to be contacted about the status of this ticket">
                <option value="0">Select one...</option>
            </select>
            <label for="via">Via :</label>
            <select class="right_col ui-corner-all selectStyle ui-state-default ui-widget" disabled="true" readonly="readonly" name="via"...

CSS

html{background:url('../images/bg_stripe.jpg');font-family:Verdana,Arial,Tahoma,Sans-Serif;width:980px;}
body{background:#EEE;border-bottom:2px solid #0000FF;border-left:2px solid #0000FF;border-right:2px solid #0000FF;color:#252D7C;font-size:11px;margin:0;margin-left:20px;margin-right:auto;padding-left:12px;padding-right:12px;width:980px}
td{border:1px #333333 solid;margin:0px;padding:.4em 1em}
.ui-progressbar-value{background-image: url('../images/pbar-ani.gif');}
.box_header{background:#FFD300;border:1px #FFFFFF solid;border-bottom:1px #999999 solid;border-right:1px #999999 solid;color:#222;display:block;font-weight:bold;padding:.5em 1em .5em 1em;text-align:center}
.box_header2{background:#D3FF00;border:1px #FFFFFF solid;border-bottom:1px #999999 solid;border-right:1px #999999 solid;color:#222;display:block;font-weight:bold;padding:.5em 1em .5em 1em;text-align:center}
.centered{margin:auto;text-align:center}
span.centered{display:block;margin:auto;text-align:center}
.db_error{background:#FFE2E2;border:1px solid red;color:#F00;font:9pt monospace;margin:8px;padding:.5em}
.db_query{background:#E6E5FF;border:1px solid blue;color:#00F;font:9pt monospace;margin:8px;padding:.5em}
.fieldnote{color:#C00;font-size:.8em;font-weight:normal}
table.resultset tr.blue td{background: #AAA !important;color:#06C !important}
table.resultset tr.gold td{background: #444 !important;color:#CC3 !important}
span.blue{color:#06C !important;font-weight:bold !important}
span.gold{color:#CC3 !important;font-weight:bold !important}
tr.bluebg{background-color:#06C !important;font-weight:bold !important; color:#FFF !important;}
tr.goldbg{background-color:#CC3 !important;font-weight:bold !important; color:#FFF !important;}
.hot{color:#F03 !important;font-weight:bold}
.hot_lite{color:#F03 !important;}
.intheblack,.success{background:#0F0;border:3px #0C0...

JavaScript

$(function() {
    var cDone = [];
    var t_id = '<?=$t_id;?>';
    $('.mainlegend').css('color', '#000');
    $('#mets_update').addClass('middle');
    $('#mets_update').validate({
        validClass: 'ui-state-highlight',
        errorClass: 'fieldnote',
        errorLabelContainer: "#errmsgs ul",
        wrapper: 'li',
        debug: false,
        ignoreTitle: true,
        highlight: function(e) {
            $(e, 'label[for=' + e.name + ']').addClass('ui-state-error');
        }
    });
    $('#addl_info').addClass('sideRight');
    $('#basics').css('text-align', 'center').addClass('centered');
    $('.right_col').css('width', '240px', 'margin', '12px 75px', 'margin-top', '0');
    $('select').width(255);
    $('label').css('float', 'left').width(350).css('margin', '12px 25px', 'margin-top', '0');
    $('#submit_ticket').button().css('padding', '6px').click(function() {
        if (($('#mets_update').valid() === false)) {
            return;
        }
        var updTicket = [];
        var numChks = $('#sel_checks label').length;
        var grnChks = $('.green_button').length;
        updTicket = $('#mets_update').serialize();
        if ((numChks == grnChks) && (numChks !== 0)) {
            updTicket = updTicket.concat('&stage=4');
        } else {
            updTicket = updTicket.concat('&stage=3');
        }
        $('.green_button').each(function() {
            updTicket = updTicket.concat('&' + $(this).attr('name') + '=1');
        });
        $('.red_button').each(function() {
            updTicket = updTicket.concat('&' + $(this).attr('name') + '=0');
        });
        $.get('doSaveTicket.php', {
            tkt_data: updTicket,
            t_id: t_id
        }, function() {
            $('#dialog_success').dialog('open').empty().append('Ticket # ' + t_id + ' has been updated!');
            var updNotes = $('#notes').not('#oldnotes').val();
            $.get('doSaveNotes.php', {
                notes_data: updNotes,
                t_id:...