I recently integrated jQuery validate into my web forms and am gradually replacing older JavaScript code. However, I encountered an issue with showing and hiding ID elements on a TR tag. While searching for solutions, most references I found were related to DIV tags rather than ID elements on TR tags, which is what I have been using. My question is: Can jQuery show and hide id elements on a TR tag? So far, my attempts have not yielded the desired results.
Below is my current code snippet:
<td colspan="5"><select name="acctloc" id="acctloc" class="inputtxtbox" onChange="msgSwap2a()" required>
<option value="" selected>Please select...</option>
<option value="Channel1">Channel 1</option>
<option value="Channel2">Channel 2</option>
<option value="Channel3">Channel 3</option>
<option value="Chan-Cust">Chan-Cust</option>
<option value="Network">Network</option>
<option value="SpecCust">Special Cust</option>
</select>
<tr id="acctnetwork" style="display:">
<td align="right"><label for="Acct_num">Acct Number:</label></td>
<td colspan="5"><input name="Acct_num" type="text" id="Acct_num" onChange="this.value = new chkLoan(this.value.trim());if (this.value == 'NaN' || this.value.length.trim() <10) {alert ('That is not a valid Acct #. \n Please enter in format of ##-####-#######.'); this.value = ''; this.focus}" required>
</td>
</tr>
<tr id="acctother" style="display:none">
<td align="right"><p>Acct Number:-</p></td>
<td colspan="5"><input name="Acct_num_sec" type="text" onChange="this.value=this.value.trim()" id="Acct_num_sec">
</td>
</tr>
<tr id="specialname" style="display:none">
<td align="right">Special Acct Name (in lieu of number)</td>
<td colspan="5"><input name="Acct_num_spec" type="text" id="Acct_num_spec" onChange="convHeSpec();"></td>
</tr>
<tr id="specr" style="display:none">
<td align="right"></td>
<td colspan="5" bgcolor="#FF9933" class="pageContentHeading">ATTENTION: For security reasons these orders for special accounts must be placed using the customer's last name in the account number box. When searching vendor website for the order, you must search by account name and address and not account number. </td>
</tr>
I can include the remaining part of the code, which involves showing and hiding the ID elements using documentgetElementById as shown below:
if (form.acctloc.value == "Channel1" || form.acctloc.value == "Channel2" || form.acctloc.value == "Channel3" || form.acctloc.value == "Chan-Cust" ) {
document.getElementById('acctother').style.display='';
document.getElementById('acct_loc').style.display='none';
document.getElementById('acctnetwork').style.display='none';
document.getElementById('specr').style.display='none';
document.getElementById('specialname').style.display='none';
document.form.Acct_num.value == '';
}
While I understand that in jQuery you simply use `$('acct_loc')` instead of `documentgetElementById`, my main query revolves around whether I should alter TR ID tags and enclose them within DIV tag ID elements. For example, change:
<tr id="specialname" style="display:none">
To:
<div id="specialname" style="display:none">?Any assistance or guidance would be greatly appreciated!
Thank you!