# Javascript Show/Hide Form Fields

**URL:** <https://forum.kirupa.com/t/javascript-show-hide-form-fields/223126>\
**Category:** web dev\
**Created:** [April 19, 2007, 7:02pm UTC](https://forum.kirupa.com/t/javascript-show-hide-form-fields/223126 "2007-04-19T19:02:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![woodman650](https://avatars.discourse-cdn.com/v4/letter/w/b9bd4f/32.png) [@woodman650](https://forum.kirupa.com/u/woodman650)\
**Post date:** [April 19, 2007, 7:02pm UTC](https://forum.kirupa.com/t/javascript-show-hide-form-fields/223126/1 "2007-04-19T19:02:19Z")

</div>

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:

```auto
<!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
