Tim
05-30-2003, 07:19 PM
I'm having a problem with a table. In a radio group (outside the table) I allow 2 selections. Based on the selection, I want to change the background color of a whole row in the table and enable/disable the controls in the row. The opposite should occur on another row.
For example, if radio selection is '1' I want the first row of the table to have a white background and the edit field in the 1st column to be enabled . Meanwhile I want the 2nd row of the table to have a gray background and edit column and the select and input elements in the 2nd and 3rd columns (respectively) to be disabled.
The opposite should happen if radio '2' is selected.
------------------------------------------
(broken code example follows)
<html>
<head>
</head>
<BODY>
<script language="JavaScript">
function onClk(sel) {
if (sel == 'y') {
alert(sel);
document.getElementById('tb1').BGCOLOR = "#FFFFFF";
document.getElementById('sameText').innerHTML="<td colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back verification on your non-repetitive wires.<br><input name='SameAmtThreshold' type='text' size='25' maxlength='25'></td>";
document.getElementById('tb2').BGCOLOR = "#999999";
document.getElementById('BankAccts').DISABLED='TRUE';
document.getElementById('diffEdit').DISABLED='TRUE';
}
else {
alert(sel);
document.getElementById('tb1').BGCOLOR = "#999999";
document.getElementById('sameText').innerHTML="<td bgcolor='#999999' colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back verification on your non-repetitive wires.<br><input name='SameAmtThreshold' type='text' disabled='true' size='25' maxlength='25'></td>";
document.getElementById('tb2').BGCOLOR = "#FFFFFF";
document.getElementById('BankAccts').DISABLED=null;
document.getElementById('diffEdit').DISABLED=null;
}
}
</script>
<h1>Security Page 1</h1>
<form method="post">
<table width="100%" border="1">
<tr>
<td colspan="2">Do you want the same amount threshold for all of your accounts?</td>
</tr>
<tr>
<td width="75"><label>
<input type="radio" name="SameAmtThreshold" value="y" onClick="onClk('y');">
Yes</label></td>
</tr>
<tr>
<td width="*"><label>
<input type="radio" name="SameAmtThreshold" value="n" onClick="onClk('n');">
No</label></td>
</tr>
</table>
<table width="100%" border="0">
<tbody id='tb1' name='tb2'>
<tr class='bodyText'>
<span ID='sameText'><td bgcolor='#999999' colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back
verification on your non-repetitive wires.<br>
<input name='SameAmtThreshold' type='text' disabled size='25' maxlength='25'>
</td></span>
</tr>
</tbody>
<tbody id='tb2' name='tb1' bgcolor='#999999'>
<tr class='bodyText'>
<td>Please specifiy what limit you would like for each account.<br><br><br><br><br><br><br><br><br><br></td>
<td rowspan='13'><select name='BankAccts' id='BankAccts' size='10' disabled='true'><option>XXXXXXXXXX - Acct 1</option><option>XXXXXXXXXX - Acct 2</option></select></td>
<td>Limit Amount:<br><input name='diffEdit' id='diffEdit' type='text' disabled='true' size='15' maxlength='15'><br><br><br><br><br><br><br><br><br></td>
</tr>
</tbody>
</table>
<br>
<br><br>
<br>
</form>
</BODY>
</html>
-----------------------
Selecting the 'yes' radio button does what I want, but the 'no' radio button does not work. What should I be doing?
Regards,
- Tim
For example, if radio selection is '1' I want the first row of the table to have a white background and the edit field in the 1st column to be enabled . Meanwhile I want the 2nd row of the table to have a gray background and edit column and the select and input elements in the 2nd and 3rd columns (respectively) to be disabled.
The opposite should happen if radio '2' is selected.
------------------------------------------
(broken code example follows)
<html>
<head>
</head>
<BODY>
<script language="JavaScript">
function onClk(sel) {
if (sel == 'y') {
alert(sel);
document.getElementById('tb1').BGCOLOR = "#FFFFFF";
document.getElementById('sameText').innerHTML="<td colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back verification on your non-repetitive wires.<br><input name='SameAmtThreshold' type='text' size='25' maxlength='25'></td>";
document.getElementById('tb2').BGCOLOR = "#999999";
document.getElementById('BankAccts').DISABLED='TRUE';
document.getElementById('diffEdit').DISABLED='TRUE';
}
else {
alert(sel);
document.getElementById('tb1').BGCOLOR = "#999999";
document.getElementById('sameText').innerHTML="<td bgcolor='#999999' colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back verification on your non-repetitive wires.<br><input name='SameAmtThreshold' type='text' disabled='true' size='25' maxlength='25'></td>";
document.getElementById('tb2').BGCOLOR = "#FFFFFF";
document.getElementById('BankAccts').DISABLED=null;
document.getElementById('diffEdit').DISABLED=null;
}
}
</script>
<h1>Security Page 1</h1>
<form method="post">
<table width="100%" border="1">
<tr>
<td colspan="2">Do you want the same amount threshold for all of your accounts?</td>
</tr>
<tr>
<td width="75"><label>
<input type="radio" name="SameAmtThreshold" value="y" onClick="onClk('y');">
Yes</label></td>
</tr>
<tr>
<td width="*"><label>
<input type="radio" name="SameAmtThreshold" value="n" onClick="onClk('n');">
No</label></td>
</tr>
</table>
<table width="100%" border="0">
<tbody id='tb1' name='tb2'>
<tr class='bodyText'>
<span ID='sameText'><td bgcolor='#999999' colspan='3'>Please specifiy the limit over which you want the bank to perform a call-back
verification on your non-repetitive wires.<br>
<input name='SameAmtThreshold' type='text' disabled size='25' maxlength='25'>
</td></span>
</tr>
</tbody>
<tbody id='tb2' name='tb1' bgcolor='#999999'>
<tr class='bodyText'>
<td>Please specifiy what limit you would like for each account.<br><br><br><br><br><br><br><br><br><br></td>
<td rowspan='13'><select name='BankAccts' id='BankAccts' size='10' disabled='true'><option>XXXXXXXXXX - Acct 1</option><option>XXXXXXXXXX - Acct 2</option></select></td>
<td>Limit Amount:<br><input name='diffEdit' id='diffEdit' type='text' disabled='true' size='15' maxlength='15'><br><br><br><br><br><br><br><br><br></td>
</tr>
</tbody>
</table>
<br>
<br><br>
<br>
</form>
</BODY>
</html>
-----------------------
Selecting the 'yes' radio button does what I want, but the 'no' radio button does not work. What should I be doing?
Regards,
- Tim