JSFiddle - React, Tailwind, and code Playground

by Rick Rose

HTML

<script src="http://norvax.com/js/parsley.js"></script>
<form id="inputform" method="post" action="dapdsubmit.php" data-validate="parsley" novalidate >
    <div id="programtype">
        <span>June:*</span>
        <!--msgspan used to display validate.js error message for missing radio button selection-->
        <span id="msgspan"></span>
        <table id="voucherprogram">
            <tr>
                <td style="border:1px solid black;width=50px;padding:5px;">Probation</td>
                <td style="border:1px solid black;width:20px;padding:5px;">
                    <input type="radio" id="probationcheckbox" name="radiogroup" value="probationcheckbox" tabindex="6"  data-required="true" parsley-error-message="Program type required" parsley-error-container="#msgspan"/>
                </td>
            </tr>
        </table>
    </div>
                                
    <div id="clientdescription">
        <span>July:*</span>
        <!--msgspan used to display validate.js error message for missing radio button selection-->
        <span id="msgspan2"></span>
        <table id="tblclientdescription">
            <tr>
                <td style="border:1px solid black;width=50px;padding:5px;">Adult Regular</td>
                <td style="border:1px solid black;width:20px;padding:5px;">
                    <input type="radio" id="adultregularcheckbox" name="radioclientcode" value="P010" tabindex="6" data-required="true" parsley-error-message="Client description type required" parsley-error-container="#msgspan2"/>
                </td>
            </tr>
        </table>
    </div>
					
	<input type="button" value="Show June" id="showJune"/>
	<input type="button" value="Show July" id="showJuly"/>
	<input type="submit" name="submit" class="mybutton" value="Submit" tabindex="15"/>
</form>

JavaScript

$("#showJune").click(function()
{
	$("#programtype").show();
	$("#clientdescription").hide();
	document.getElementById("adultregularcheckbox").removeAttribute("required");
	document.getElementById("probationcheckbox").setAttribute("required","true");
});

$("#showJuly").click(function()
{
    $("#programtype").hide();
    $("#clientdescription").show();
    document.getElementById("probationcheckbox").removeAttribute("required");
    document.getElementById("adultregularcheckbox").setAttribute("required","true");
});