woodman650
April 19th, 2007, 03:02 PM
I'm working with a demo script somebody posted on a forum a few years ago that I stumbled upon and wondered if anyone knew enough javascript to help me modify this a bit. Basically, the code creates 2 radio buttons... when 1 is selected the form field is revealed, when the other is selected the form field is hidden. I just can't figure out how to make this work with another set of radio buttons and another form field. I can't make them independent. here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hide or SHow Controls Demo</title>
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
// Hide all regions
document.getElementById('txtShow1').style.display = 'none';
document.getElementById('txtShow1').disabled = 'disabled';
// Display the requested region
document.getElementById
('txtShow' + controlToHide).style.display = 'block';
document.getElementById
('txtShow' + controlToHide).disabled = '';
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
</head>
<body>
<form name="frmTest" id="frmTest" method="post">
<input name="radio1" type="radio"
value="" onclick="HideOrShowStuff(1)" />
Table 1 Show
<br />
<input name="radio1" type="radio"
value="" onclick="HideOrShowStuff(2)" />
Table 1 Hide <br />
<br />
<input name="radio2" type="radio"
value="" />
Table 2 Show <br />
<input name="radio2" type="radio"
value="" />
Table 2 Hide
</form>
<table width="200" border="1">
<tr>
<td><table width="200" border="1" id="txtShow1" style="display:none;" >
<tr>
<td>table1</td>
<td>table1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="1" id="txtShow2" >
<tr>
<td>table2</td>
<td>table2</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Any ideas? I'm sure it can't be very tricky... I just don't know a whole lot of javascript. :( Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Hide or SHow Controls Demo</title>
<script type="text/javascript">
function HideOrShowStuff(controlToHide)
{
if (document.getElementById)
{
// Hide all regions
document.getElementById('txtShow1').style.display = 'none';
document.getElementById('txtShow1').disabled = 'disabled';
// Display the requested region
document.getElementById
('txtShow' + controlToHide).style.display = 'block';
document.getElementById
('txtShow' + controlToHide).disabled = '';
}
else
{
alert('Sorry, your browser doesn\'t support this');
}
}
</script>
</head>
<body>
<form name="frmTest" id="frmTest" method="post">
<input name="radio1" type="radio"
value="" onclick="HideOrShowStuff(1)" />
Table 1 Show
<br />
<input name="radio1" type="radio"
value="" onclick="HideOrShowStuff(2)" />
Table 1 Hide <br />
<br />
<input name="radio2" type="radio"
value="" />
Table 2 Show <br />
<input name="radio2" type="radio"
value="" />
Table 2 Hide
</form>
<table width="200" border="1">
<tr>
<td><table width="200" border="1" id="txtShow1" style="display:none;" >
<tr>
<td>table1</td>
<td>table1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="1" id="txtShow2" >
<tr>
<td>table2</td>
<td>table2</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Any ideas? I'm sure it can't be very tricky... I just don't know a whole lot of javascript. :( Thanks in advance