How To Show And Hide Input Fields Based On Radio Button Selection

Question

Here is the code to show input fields depending on radio selection like:

SCRIPT

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    } else {
        document.getElementById('ifYes').style.visibility = 'hidden';
    }

</script>

HTML

Yes
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>No
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">If yes, explain:
    <input type='text' id='yes' name='yes'/>
    <br>What can we do to accommodate you?
        <input type='text' id='acc' name='acc'/>
</div>
   other 3
<input type='text' id='other3' name='other3'>
<br>
    other 4
<input type='text' id='other4' name='other4'>
<br>

However I would like input fields to be hidden (like on the image), and make they do not use any space until radio button is selected, when radio is selected show them with fade effect...

Here is the fiddle:

enter image description here

Learner · Accepted Answer · 2013-07-12 18:29:20Z

48

Replace all instances of visibility style to display

display:none //to hide
display:block //to show

Here's updated jsfiddle: http://jsfiddle.net/QAaHP/16/

You can do it using Mootools or jQuery functions to slide up/down but if you don't need animation effect it's probably too much for what you need.

CSS display is a faster and simpler approach.

answered Jul 12, 2013 at 18:29

Learner

4,0047 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

radhika · Accepted Answer · 2014-02-08 14:16:38Z

***This will work.........
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 window.onload = function() {
    document.getElementById('ifYes').style.display = 'none';
    document.getElementById('ifNo').style.display = 'none';
}
function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
    } 
    else if(document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
   }
}
function yesnoCheck1() {
   if(document.getElementById('redhat').checked) {
       document.getElementById('redhat1').style.display = 'block';
       document.getElementById('aix1').style.display = 'none';
    }
   if(document.getElementById('aix').checked) {
       document.getElementById('aix1').style.display = 'block';
       document.getElementById('redhat1').style.display = 'none';
    }
}
</script>
</head>
<body>
Select os :<br>
windows
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>Unix
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="display:none">
Windows 2008<input type="radio" name="win" value="2008"/>
Windows 2012<input type="radio" name="win" value="2012"/>
</div>
<div id="ifNo" style="display:none">
Red Hat<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"value="2008" 

id="redhat"/>
AIX<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"  
value="2012" id="aix"/>
</div>
<div id="redhat1" style="display:none">
Red Hat 6.0<input type="radio" name="redhat" value="2008" id="redhat6.0"/>
Red Hat 6.1<input type="radio" name="redhat" value="2012" id="redhat6.1"/>
</div>
<div id="aix1" style="display:none">
aix 6.0<input type="radio" name="aix" value="2008" id="aix6.0"/>
aix 6.1<input type="radio" name="aix" value="2012" id="aix6.1"/
</div>
</body> 
</html>***

I just wanted to tell you that your solution already helped me multiple times! Thanks a lot!!!

Shubelal Kumar · Accepted Answer · 2014-03-09 14:30:39Z

6

You can do with Very Simple Step

$(':radio[id=radio1]').change(function() {
   $("#yes").removeClass("none");
   $("#no").addClass("none");


});
$(':radio[id=radio2]').change(function() {
   $("#no").removeClass("none");
   $("#yes").addClass("none");

});

answered Mar 9, 2014 at 14:30

Shubelal Kumar

812 silver badges5 bronze badges

Comments

Carl Vitullo · Accepted Answer · 2013-07-12 18:29:37Z

5

You'll need to also set the height of the element to 0 when it's hidden. I ran into this problem while using jQuery, my solution was to set the height and opacity to 0 when it's hidden, then change height to auto and opacity to 1 when it's un-hidden.

I'd recommend looking at jQuery. It's pretty easy to pick up and will allow you to do things like this a lot more easily.

$('#yesCheck').click(function() {
    $('#ifYes').slideDown();
});
$('#noCheck').click(function() {
    $('#ifYes').slideUp();
});

It's slightly better for performance to change the CSS with jQuery and use CSS3 animations to do the dropdown, but that's also more complex. The example above should work, but I haven't tested it.

answered Jul 12, 2013 at 18:29

Carl Vitullo

9237 silver badges15 bronze badges

2 Comments

Learner Over a year ago

Just FYI he is using Mootools and not jQuery :)

Carl Vitullo Over a year ago

The question is tagged with jQuery and I found it in the jQuery question list, so I gave him a jQuery answer.

Kenly · Accepted Answer · 2020-02-11 13:34:08Z

3

Use display:none/block, instead of visibility, and add a margin-top/bottom for the space you want to see ONLY when the inputs are shown

 function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
           document.getElementById('ifYes').style.display = 'block';
        } else {
           document.getElementById('ifYes').style.display = 'none';
        }
    }

and your HTML line for the ifYes tag

<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:

edited Feb 11, 2020 at 13:34

Kenly

27k7 gold badges50 silver badges67 bronze badges

answered Jul 12, 2013 at 18:35

Zale

658 bronze badges

Comments

pinmonkeyiii · Accepted Answer · 2013-07-12 18:24:48Z

1

Use display:none to not show the items, then with JQuery you can use fadeIn() and fadeOut() to hide/unhide the elements.

http://www.w3schools.com/jquery/jquery_fade.asp

answered Jul 12, 2013 at 18:24

pinmonkeyiii

1911 silver badge3 bronze badges

Comments

Dolchio · Accepted Answer · 2013-07-12 18:44:25Z

Using the visibility property only affects the visibility of the elements on the page; they will still be there in the page layout. To completely remove the elements from the page, use the display property.

display:none // for hiding
display:block // for showing

Make sure to change your css file to use display instead of visibility too.

As for the javascript (this is not jQuery), make sure you hide the options by default when the page loads:

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('ifYes').style.display = 'none';
    }

    function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
            document.getElementById('ifYes').style.display = 'block';
        } 
        else {
            document.getElementById('ifYes').style.display = 'none';
        }
    }

</script>

If you haven't done so already, I would recommend taking a look at jQuery. jQuery code is much clearer and easier to write and understand.

http://www.w3schools.com/jquery/default.asp

Misael Riojas · Accepted Answer · 2018-12-18 00:43:17Z

1

<script type="text/javascript">
function Check() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
    } 
    else {
        document.getElementById('ifYes').style.display = 'none';

   }
}

</script>
</head>
<body>
Select os :
<br>
Two
<input type="radio" onclick="Check();" value="Two" name="categor`enter code here`y" id="yesCheck"/>One
<input type="radio" onclick="Check();" value="One"name="category"/>
<br>
<div id="ifYes" style="display:none" >
Three<input type="radio" name="win" value="Three"/>
Four<input type="radio" name="win" value="Four"/>

answered Dec 18, 2018 at 0:43

Misael Riojas

211 bronze badge

Comments

t2fmkh · Accepted Answer · 2021-10-11 07:56:46Z

1

Just in case anyone wants a solution where only the input field displays when a radio button is selected using pure Javascript, here it is:

function yesnoCheck() {
    yes1 = document.getElementById('yes')
    yes2 = document.getElementById('acc')
    
    no1 = document.getElementById('other3')
    no2 = document.getElementById('other4')
    
    if (document.getElementById('yesCheck').checked) {
        yes1.type = yes2.type = 'text';
        no1.type = no2.type = 'hidden';
    } else {
        no1.type = no2.type = 'text';
        yes1.type = yes2.type = 'hidden';
    }
}

Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"/>

No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"/>

<br>

<input type='hidden' id='yes' name='yes' placeholder='If yes, explain:'/>
<input type='hidden' id='acc' name='acc' placeholder='What can we do to accommodate you?'/>

<input type='hidden' id='other3' name='other3' placeholder='other 3'>
<input type='hidden' id='other4' name='other4' placeholder='other 4'>

answered Oct 11, 2021 at 7:56

t2fmkh

1172 silver badges8 bronze badges

1 Comment

t2fmkh Over a year ago

I'm also aware that I'm not answering the question posted, but based on the title this was what I wanted when I was looking for solutions just the other day...

MarcoZen · Accepted Answer · 2024-06-12 05:57:18Z

2024 Update.

As above but for a BootStrap 5.x environment, the display type should be 'flex' to display/show the div / field.

Here is the Javascript Code ( not inline javascript is not advisble due to potential security issues). I am assuming 2 radio buttons ( NO | YES ) that will hide / show the Input Field ( A Div containing a label and a input field )


// Radio Buttons 1 & 2 ( No and Yes )
const radioNo      = document.getElementById("radiobutton1");    // No
const radioYes     = document.getElementById("radiobutton2");    // Yes

const inputField1 = document.getElementById("fieldShowHide1");

if ( radioNo ){

     // Upon load 
     if( radio1.checked ){ inputField1.style.display = "none";   }   

     // Upon Change
     radioNo.addEventListener("change", event => { 

         // Hide - Removes the element from the page
         if( radioNo.checked ){ inputField1.style.display = "none";   }   

     }); // end of  radioNo.addEventListener

}// end of radioNo

if ( radioYes ){

     // Upon Load 
     if( radioYes.checked ){ inputField1.style.display = "flex";  } 

     // Upon Change
     radioYes.addEventListener("change", event => { 

          // Show - Inserts the element back into the page         
          if( radioYes.checked ){ inputField1.style.display = "flex";  }   
   
     }); // end of  radioYes.addEventListener

} // end of if radioYes

Collectives™ on Stack Overflow

How To Show And Hide Input Fields Based On Radio Button Selection

SCRIPT

HTML

10 Answers 10

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

SCRIPT

HTML

10 Answers 10

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related