954,600 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Radio buttons change html display style (IE)

In an html form, I want a certain field to be invisible when "no" is checked and visible when "yes" is checked.

This is my code:

html:

<form action="pageName.html" method="post" name="formName">
    Question?
        <input name="radioBool" type="radio" value="1" onchange="dispField('textInput');" />yes
        <input name="radioBool" type="radio" value="0" onchange="dispField('textInput');" />no
    
    <span id="textInput" style="display:none">
        Specify: <input name="specify" type="text" />
    </span>
</form>


javascript:

function dispField(htmlID) {
    if (document.formName.radioBool[0].checked == true) {
        document.getElementById(htmlID).style.display = "";
    }
    else {
        document.getElementById(htmlID).style.display = "none";
    }
}


This seems to work perfectly across all browsersexcept for IE (latest version).

In IE the only problem is that the radio buttons have to lose focus before the span will change to visible. I would like the "specify" field to display immediately after the radio button changes to yes, rather than waiting for the buttons to lose focus.

Thanks,
David

nizuya
Light Poster
38 posts since May 2008
Reputation Points: 10
Solved Threads: 1
 

Use onclick= instead of onchange=.

fxm
Posting Pro
596 posts since Apr 2010
Reputation Points: 40
Solved Threads: 74
 

That works! I didn't even try it because I figured it wouldn't trigger if someone was tabbing / arrowing through the form. Thanks.
-David

nizuya
Light Poster
38 posts since May 2008
Reputation Points: 10
Solved Threads: 1
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: