I'm building a web form that hides/shows table rows and sets certain fields required or not required based on user selections.
My question is two fold. First, how do I require users to check at least one box in the group of checkboxes called "ReallocationType"? I'm unsure what the code in "ValidateCheckboxes" function should look like. Secondly, how do I only enforce this only when "ReallocationTypeRow" is displayed?
function ReqTypeHideShow(selection) {
var s1 = document.getElementById("ReallocationRow")
if (selection === "ReallocateCost") {
s1.style.display = "table-row" ;
//call function ValidateCheckboxes() ;
}
}
function ValidateCheckboxes() {
form.ReallocationType[0].checked === false
//Need additional code here
form.ReallocationType[1].checked === false
//Need additional code here
form.ReallocationType[2].checked === false
//Need additional code here
}
<table>
<tr id="ReqTypeRow">
<td>Request Type</td>
<td>
<select id="ReqType" name="ReqType" onchange="ReqTypeHideShow(this.value)">
<option value="">-- Select an Option --</option>
<option value="ReqDef">Request New Project</option>
<option value="ProjAppr">Request Funding</option>
<option value="ProjReappr">Request Re-approval</option>
<option value="ReallocateCost">Re-allocate Funding</option>
</select>
</td>
</tr>
<br>
<tr id="ReallocationTypeRow" style="display:none">
<td>Reallocation Type (check all that apply)</td>
<td>
<input type="checkbox" name="ReallocationType" value="LabToExt">Internal to External Spend<br>
<input type="checkbox" name="ReallocationType" value="ExtToLab">External to Internal Spend<br>
<input type="checkbox" name="ReallocationType" value="LabToLab">Shift Internal Phases Around
</td>
</tr>
</table>
Thank you in advance for the help!
Aucun commentaire:
Enregistrer un commentaire