JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<input type="checkbox" id="ckbxEmp">Employee?
<input type="text" id="txtbxSSNOrITIN" maxlength="4" width="40">
<label id="lblSSNOrITIN">Bla</label>
</br>
<input type="text" id="txtbxFloat">
</br>
<input type="text" id="txtbxHopeFloats">
</br>
<input type="text" id="txtbxFloatingFreeAsABird">
</br>
</br>
<input type="text" id="txtbxMonth">
</br>
<input type="text" id="txtbxDayOfMonth">
</br>
<input type="text" id="txtbxYear">
</br>
<input type="dropdownlist" id="ddl">
<select name="bla" id="bla">
    <option value="1">Jan</option>
    <option value="2">Feb</option>
    <option value="3">Mar</option>
    <option value="4">Apr</option>
    <option value="5">May</option>
    <option value="6">Jun</option>
    <option value="7">Jul</option>
    <option value="8">Aug</option>
    <option value="9">Sep</option>
    <option value="10">Oct</option>
    <option value="11">Nov</option>
    <option value="12">Dec</option>
</select>
</br>
<input type="textarea" id="explainPaymentTextBox">
</br>
<input type="hidden" id="BLAhfuseremail" value="[email protected]">
<input type="text" id="BLAboxemailsection1" value="bla">
</br>
<input type="text" id="BLAboxPaymentAmount" value="2">
</br>
<input type="text" id="BLAboxSection5Total" value="3">
</br>
<input type="text" id="BLAbla">

JavaScript

$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
    var ckd = this.checked;
    if (ckd) {
        alert('Please log in prior to continuing with this form');
    }

    /* This was part of the ckbxEmp checkbox before, which has been removed */
    var ssnmaxlen = 4;
    var itinmaxlen = 11;
    var ssntextboxwidth = 40;
    var itintextboxwidth = 100;
    var $input = $('[id$=txtbxSSNOrITIN]');
    var $lbl = $('[id$=lblSSNOrITIN]');

    if (ckd) {
        $input.data("oldValue", $input.val());
    } // Remember current value

    $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
        background: ckd ? 'yellow' : 'lightgreen',
        width: ckd ? ssntextboxwidth : itintextboxwidth
    }).val(function (i, v) {
        /* If checked, trim textbox contents to ssnmaxlen characters */
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });

    $lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
    /* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
    var strLength = $input.val().length * 2;
    $input.focus();
    $input[0].setSelectionRange(strLength, strLength);
});

/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
$(document).on("click", '[id$=rbPaymentForSelf]', function () {
    if (this.checked) {
        $('[id$=panelSection2]').slideUp();
        $('[id$=panelSection3]').slideUp();
        $('[id$=_AddressRows]').slideUp();

        $('[id$=_MailStopRow]').slideDown();
        $('[id$=lblSSNOrITIN]').text("SSN");
    }
});

/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("click", '[id$=rbPaymentForSomeoneElse]',...