Display the relevant div on radio button select

jerry4all

12-17-2011, 03:43 PM

Another task please...I need to display the appropriate div when a radio button is selected...

<body>
<script type="text/javascript">
function checkjob(jobvalue){

if(jobvalue="type") {

document.getElementById("type").style.display = "block";

}else if(jobvalue="select"){
document.getElementById("select").style.display = "block";

}else if(jobvalue="tag"){
document.getElementById("tag").style.display = "block";

}

}
</script><br />
<table width="200">
<tr>
<td><label>
<input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" />
type</label></td><td><label>
<input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)" />
select</label></td>
<td><label>
<input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)" />
tag</label></td>
</tr>

</table>
<div id="type" style="display:none"><input name="contact" type="text" /></div>
<div id="tag" style="display:none">tag:<input name="contact" type="text" /></div>
<div id="select" style="display:none"><select name="">
<option value="a" selected="selected">option 1</option>
<option value="b">option 2</option>
</select></div>
</body>

mvmacd

12-17-2011, 04:05 PM

Your problem is this line:

if (jobvalue="select")

It needs to be

if (jobvalue == "select")

However, in each if/else if, you also need to set the display of the other divs hidden, that way only 1 will show up at 1 time.

That being said, tell me how this works for you :thumbsup:

<body>

<script type="text/javascript">
function checkjob(jobvalue){

if(jobvalue == "type")
{
document.getElementById("type").style.display = "block";
document.getElementById("select").style.display = "none";
document.getElementById("tag").style.display = "none";
}

else if(jobvalue == "select")
{
document.getElementById("type").style.display = "none";
document.getElementById("select").style.display = "block";
document.getElementById("tag").style.display = "none";
}

else if(jobvalue == "tag")
{
document.getElementById("type").style.display = "none";
document.getElementById("select").style.display = "none";
document.getElementById("tag").style.display = "block";
}

}
</script><br />
<table width="200">
<tr>
<td><label>
<input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" />
type</label></td><td><label>
<input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)" />
select</label></td>
<td><label>
<input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)" />
tag</label></td>
</tr>

</table>
<div id="type" style="display:none"><input name="contact" type="text" /></div>
<div id="tag" style="display:none">tag:<input name="contact" type="text" /></div>
<div id="select" style="display:none"><select name="">
<option value="a" selected="selected">option 1</option>
<option value="b">option 2</option>
</select></div>
</body>

chump2877

12-17-2011, 04:21 PM

Similar to mvmacd's solution, just less code:

<body>

<script type="text/javascript">
function checkjob(jobvalue)
{
var hiddenDivs = document.getElementById('hiddenDivs').getElementsByTagName('div');
for (var i=0; i<hiddenDivs.length; i++)
{
hiddenDivs[i].style.display = (hiddenDivs[i].id == jobvalue) ? 'block' : 'none';
}
}
</script>
<br />
<table width="200">
<tr>
<td><label>
<input type="radio" name="cat" value="type" id="cat_0" onchange="checkjob(this.value)" />
type</label></td><td><label>
<input type="radio" name="cat" value="select" id="cat_1" onchange="checkjob(this.value)" />
select</label></td>
<td><label>
<input type="radio" name="cat" value="tag" id="cat_2" onchange="checkjob(this.value)" />
tag</label></td>
</tr>

</table>
<div id="hiddenDivs">
<div id="type" style="display:none"><input name="contact" type="text" /></div>
<div id="tag" style="display:none">tag:<input name="contact" type="text" /></div>
<div id="select" style="display:none"><select name="">
<option value="a" selected="selected">option 1</option>
<option value="b">option 2</option>
</select></div>
</div>
</body>

jerry4all

12-17-2011, 05:55 PM

Thanks ya'll...up and running:thumbsup: