How To Show And Hide Input Fields Based On Radio Button Selection
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...
Accepted Answer
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.
Read more... Read less...
***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>***
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");
});
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.
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:
Use display:none
to not show the items, then with JQuery you can use fadeIn()
and fadeOut()
to hide/unhide the elements.