Skip to main content
Known Participant
June 25, 2009
Question

how to write this code

  • June 25, 2009
  • 2 replies
  • 974 views

Hi i had a html form in coldfusion and in the form i have fields like firstname , lastname etc.

i had one radio button in the form and if i select that radio button then a dropdown box should have to be shown and if the radio button is not selected then the dropdown box should be invisible.

I am not sure how  to write this logic can anyone help me in this .

Thanks.

This topic has been closed for replies.

2 replies

Inspiring
June 25, 2009

Here is a snippet of code that should work for you...

<script language="JavaScript" type="text/javascript">
       function showHide(el_id) {
        if (document.getElementById(el_id).style.display == "none"){
            document.getElementById(el_id).style.display = "block";
            }
        else if(document.getElementById(el_id).style.display == "block"){
            document.getElementById(el_id).style.display = "none";
        }
    }
</script>
<input type="radio" name="myName" value="1" onClick="showHide('showHideDiv');">

<div id="showHideDiv" style="display:none;">test</div>

ilssac
Inspiring
June 25, 2009

I would modify your if statement somewhat....

var elem = document.getElementById(el_id);// no reason to do this over and over.

if (elem.style.display != "none"){
   elem.style.display = "none";
}
else {// no need for another if evaluation, just do the oposite in an else clause.
   elem.style.display = "";
}

By not using 'block' you are not ignoring or converting non-block elements.  By setting display to an empty string, you revert that element to it's natural display property, be it block or inline or table-cell or whatever.

ilssac
Inspiring
June 25, 2009

This is going to require JavaScript and probably some CSS.

An onclick handler for the radio control can change the display style of the select control from 'none' to '' and back again as required.