Show/hide drop down when radio button is selected
Question
I am completely new to Javascript. I have a program I am writing for a class which has a form. I need a drop down menu to appear with the months of the year in it if one of the two radio buttons is clicked. I have tried several different ways but I can't seem to figure it out. Also, I will need to do this for like 6 of the fields. So will I need more than one function or can I use the same one?
3 answers
solution1
5 2011-07-27 16:22:56
Try this:
<script type="text/javascript">
function ChangeDropdowns(value){
if(value=="radiobuttonYes"){
document.getElementById('ddlId').style.display='none';
}else if(value=="radiobuttonNo"){
document.getElementById('ddlId').style.display='block';
}
}
</script>
If all the fields depend on the same radio button value, you can use the same function by passing the clientId as parameter and using it in getElementById.
solution2
0 2011-07-27 16:28:40
If you assign an id to each element you'd like to show/hide then you can use JavaScript and CSS to show or hide those elements of the page.
Put this code in your header of the HTML file. Note that display affects layout, essentially removing the space the element takes up on the page. Visibility preserves layout, hiding the element but keeping it's space available. You can use whichever function suits you.
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id); //get the element based on it's id
//if the element exists then set it's visiblity
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
Here is an example of what should be in the body. You can choose to use the setVisible or setDisplay function. Also, you may want to consider adding other even listeners to the radio buttons such as onchange because the user doesn't need to mouse click a radio button to check it. They can use the keyboard to select it as well which would not fire the onclick event.
<div>
Radio:
<input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
<input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
</div>
<div id='Div1'>
More form fields here.
</div>
<div id='Div2'>
More form fields here.
</div>
Here is my full code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
</head>
<body>
<div>
Radio:
<input type='radio' name='myradio' value='first' onclick="setVisible('Div1', true); setVisible('Div2', false);" />
<input type='radio' name='myradio' value='second' onclick="setVisible('Div2', true); setVisible('Div1', false);" />
</div>
<div id='Div1'>
More form fields here. 1
</div>
<div id='Div2'>
More form fields here. 2
</div>
</body>
</html>
solution3
0 2011-07-27 16:35:06
Looks like they beat me to it. But, here's another example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>radio example</title>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
</style>
<script type="text/javascript">
function showSelect() {
var select = document.getElementById('my_select');
select.className = 'show';
}
</script>
</head>
<body>
<form action="#" method="post">
<label for="my_radio">Click me</label>
<input id="my_radio" type="radio" name="options" value="some_value" onclick="showSelect();" />
<select id="my_select" class="hide">
<option value="someValue">Some Text</option>
</select>
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.