Javascript Show/Hide Form Fields

programming web dev
1

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. :frowning: Thanks in advance