Skip to content Skip to sidebar Skip to footer
Home / Javascript

Show/hide Drop Down When Radio Button Is Selected

Post a Comment
I am completely new to Javascript. I have a program I am writing for a class which has a form. I need a drop down menu to appear with the months of the year in it if one of the two

Solution 1:

Try this:

<scripttype="text/javascript">functionChangeDropdowns(value){
    if(value=="radiobuttonYes"){
        document.getElementById('ddlId').style.display='none';
    }elseif(value=="radiobuttonNo"){
        document.getElementById('ddlId').style.display='block';
    }
}
</script>

If all the fields depend on the same radio button value, you can use the same function by passing the clientId as parameter and using it in getElementById.

Solution 2:

Looks like they beat me to it. But, here's another example.

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><metahttp-equiv="Content-type"content="text/html; charset=utf-8" /><title>radio example</title><styletype="text/css">.show { display: block;  }
            .hide { display: none; }
        </style><scripttype="text/javascript">functionshowSelect() {
                var select = document.getElementById('my_select');
                select.className = 'show';
            }
        </script></head><body><formaction="#"method="post"><labelfor="my_radio">Click me</label><inputid="my_radio"type="radio"name="options"value="some_value"onclick="showSelect();" /><selectid="my_select"class="hide"><optionvalue="someValue">Some Text</option></select></form></body></html>

Solution 3:

If you assign an id to each element you'd like to show/hide then you can use JavaScript and CSS to show or hide those elements of the page.

Put this code in your header of the HTML file. Note that display affects layout, essentially removing the space the element takes up on the page. Visibility preserves layout, hiding the element but keeping it's space available. You can use whichever function suits you.

<scriptlanguage="javascript"type="text/javascript">functionsetVisible(id, visible) {
    var o = document.getElementById(id); //get the element based on it's id//if the element exists then set it's visiblityif (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
    if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}

functionsetDisplay(id, visible) {
    var o = document.getElementById(id);
    if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
    if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}

</script>

Here is an example of what should be in the body. You can choose to use the setVisible or setDisplay function. Also, you may want to consider adding other even listeners to the radio buttons such as onchange because the user doesn't need to mouse click a radio button to check it. They can use the keyboard to select it as well which would not fire the onclick event.

<div>
    Radio:
    <inputtype='radio'name='myradio'value='first'onclick="setVisible('Div1', true); setVisible('Div2', false);" /><inputtype='radio'name='myradio'value='second'onclick="setVisible('Div2', true); setVisible('Div1', false);" /></div><divid='Div1'>
    More form fields here.
</div><divid='Div2'>
    More form fields here.
</div>

Here is my full code example:

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><scriptlanguage="javascript"type="text/javascript">functionsetVisible(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }

    functionsetDisplay(id, visible) {
        var o = document.getElementById(id);
        if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
        if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
    }
    </script></head><body><div>
        Radio:
        <inputtype='radio'name='myradio'value='first'onclick="setVisible('Div1', true); setVisible('Div2', false);" /><inputtype='radio'name='myradio'value='second'onclick="setVisible('Div2', true); setVisible('Div1', false);" /></div><divid='Div1'>
        More form fields here. 1
    </div><divid='Div2'>
        More form fields here. 2
    </div></body></html>

Post a Comment for "Show/hide Drop Down When Radio Button Is Selected"