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:


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


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 browsers except 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.


Recommended Answers

All 2 Replies

Use onclick= instead of onchange=.

commented: Perfect answer. +3

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.