Hide elements with radio buttons


Sometimes you want to show or hide certain elements of a form, depending on the selection of a radiobutton.

 

I am by no means any javascript ninja, but this is one simple way I came up with:

<html>
<head>
    <script type="text/javascript">
        function displayElement(element) {
            x = element.value;
            if (x === 1) {
            document.getElementById('text').style.display = '';
          } else {
            document.getElementById('text').style.display = 'none';
          }
        }
    </script>
</head>

<body>
<form name="form">
    <input name="choice" type="radio" value="1" onclick="DisplayElement(this)" checked/>
    <input name="choice" type="radio" value="2" onclick="DisplayElement(this)"/>
    <input name="text" type="text" id="text"/>
</form>
</body>
</html>
HTML

 
This could apply to any element. For example, you could put a whole bunch of elements in a div and the hide/show the div. Like this:

[html]

<script type=”text/javascript”>
function DisplayElement(element)
{
x = element.value;
if (x == 1) {
document.getElementById(‘container’).style.display = ”;
}
else {
document.getElementById(‘container’).style.display = ‘none’;
}
}
</script>

<form name=”form”>
<input name=”choice” type=”radio” value=”1″ onclick=”DisplayElement(this)” checked/>
<input name=”choice” type=”radio” value=”2″ onclick=”DisplayElement(this)”/>
<div id=”container”>
<input type=”checkbox”/>
<input type=”checkbox”/>
<input type=”text”/>
<input type=”text”/>
<input type=”text”/>
</div>
</form>
[/html]

 
 
Here’s another way to do it. This example takes a number as a parameter instead of using the value of the element. A bit more compact code and it might be more flexible.

[html]
<script type=”text/javascript”>
function DisplayElement(x)
{
if (x == 1) {
document.getElementById(‘text’).style.display = ”;
}
else {
document.getElementById(‘text’).style.display = ‘none’;
}
}
</script>

<form name=”form”>
<input name=”choice” type=”radio” onclick=”DisplayElement(1)” checked/>
<input name=”choice” type=”radio” onclick=”DisplayElement(2)”/>
<input name=”text” type=”text” id=”text”/>
</form>
[/html]

And here’s an even more flexible version. In this example you can pass the id of the element you want to hide as a second argument to the function. This way you can use the same function to toggle the visibility of many different elements.

[html]
<script type=”text/javascript”>
function DisplayElement(x,target)
{
if (x == 1) {
document.getElementById(target).style.display = ”;
}
else {
document.getElementById(target).style.display = ‘none’;
}
}
</script>

<form name=”form”>
<input name=”choice” type=”radio” onclick=”DisplayElement(1,’text’)” checked/>
<input name=”choice” type=”radio” onclick=”DisplayElement(2,’text’)”/>
<input name=”text” type=”text” id=”text”/>
</form>
[/html]

Here is another post, to do the same thing with a checkbox.

Leave a Reply

Your email address will not be published. Required fields are marked *