JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<form id="report_1">
    
<table cellspacing="0" class="t">
    <tbody>
        <tr>
<td width="125" bgcolor="#FFFFFF">
<input type="text" name="temp_file_name_101960" size="15" value="JHSMRS-190.mp3" />
</td>
            <td width="60" bgcolor="#CCCCCC" align="right">Style:</td>
            <td width="125" bgcolor="#FFFFFF">
<select name="style_101960" class="style" id="style_101960">
                    <option value="S" selected="">Type-1</option>
                    <option value="V" >Type-2</option>
                    <option value="FG">Type-3</option>
                    <option value="RAW">Reality TV</option>
                    <option value="RAWT">Reality w/TC</option>
                    <option value="DC">Lite Cont.</option>
                    <option value="DCT">Lite Cont. w/TC</option>
                    <option value="bad">Bad</option>
                </select>
            </td>
            <td width="60" bgcolor="#CCCCCC" align="right">Template:</td>
            <td width="125" bgcolor="#FFFFFF">
                <select name="template_101960">
                    <option value="True">True</option>
                    <option value="Clean" selected="">Clean</option>
                    <option value="Custom Template">Custom Template</option>
                </select>
            </td>
        </tr>
        <tr>
<td width="125" bgcolor="#FFFFFF">
<input type="text" name="temp_file_name_101961" size="15" value="JHSMRS-191.mp3" />
</td>
            <td width="60" bgcolor="#CCCCCC" align="right">Style:</td>
            <td width="125" bgcolor="#FFFFFF">
<select name="style_101961" class="style" id="style_101961">
                    <option value="S">Type-1</option>
                    <option value="V" >Type-2</option>
                    <option value="FG"  selected="">Type-3</option>
                    <option value="RAW">Reality TV</option>
                    <option value="RAWT">Reality w/TC</option>
                    <option value="DC">Lite...

CSS

div#dialog-form {
        font-size: 75%;
    }

 
    input.text {
        margin-bottom:12px;
        width:95%;
        padding: .4em;
    }

    fieldset {
        padding:0;
        border:0;
        margin-top:25px;
    }

    h1 {
        font-size: 1.2em;
        margin: .6em 0;
    }

    div#users-contain {
        width: 350px;
        margin: 20px 0;
    }

    div#users-contain table {
        margin: 1em 0;
        border-collapse: collapse;
        width: 100%;
    }

    div#users-contain table td, div#users-contain table th {
        border: 1px solid #eee;
        padding: .6em 10px;
        text-align: left;
    }

    .ui-dialog .ui-state-error {
        padding: .3em;
    }
    .validateTips {
        border: 1px solid transparent;
        padding: 0.3em;

    }

JavaScript

// initialize these in a scope that can be observed in all functions.
var original_value,original_style,original_id;

$(".style").on('focus', function () {
    // in order to capture the existing style, it must be read on focus,
    // before the change takes place.
    original_val = $(this).val();
    original_id  = $(this).attr('id');
    original_style = $("#"+original_id+" option:selected").text();
    var pieces = original_id.split("_");
    temp_id = pieces[1];
}).change(function (e) {
    // if the pull down menu is actually changed, then this even fires and
    // we pop a dialog box to get an explaination for why it got reclassified.
    new_val = $(this).val();
    // set the pulldown in the modal dialog to the new value
    $("#new_style").val(new_val);
    // display the old style prior to the change, this is determined during the on focus
    // event.
    $("#prior_style").html(original_style);
    // open the dialog bax to get an exlaination.
    dialog.dialog('open');
});

dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 480,
    width: 580,
    modal: true,
    open: function (e,ui) {
        // clear out old check marks from previous reclassification
        $("#the_form").find(':checkbox').removeAttr('checked');
        // clear out old text fields and textareas.
        $("#the_form").find("input[type=text], textarea").val("");
     },
    buttons: {
        "Reclassify File": reclassify, 
        Cancel: function () {
            dialog.dialog("close");
        }
    },
    close: function () {
        // do whatever needs to be done on closing of the modal dialog box.
    }
});

function reclassify() {
    var valid = true;
    // process the reclassification.
    var checkboxes = $("#the_form").find('input:checked');
    
    console.log(checkboxes);
    // store the results as hidden form variables.
    
    // close the modal dialog window.
    dialog.dialog("close");
    return valid;
};