I'd like to show / hide a div within a td tag based on the select value chosen. I cannot get the label text to appear, only the textbox. Can someone please give me a hand with this?
Here is my code so far
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.myform.other.style.visibility = 'visible';
} else {
document.myform.other.style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[ document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
Give the element an id:
<div id="Other" style="visibility:hidden">
Now you can easily access it in the code:
document.getElementById('Other').style.visibility = 'visible';
Here's the code with the changes, tested and working:
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.getElementById('Other').style.visibility = 'visible';
} else {
document.getElementById('Other').style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[
document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div id="Other" style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
The problem is that you have set visibility on your containing <div>
to hidden
but your javascript is only showing your input. ( document.myform.other.style.visibility
)
To make it work, simply give your <div>
an id
and show and hide that instead:
// ... snip ...
function toggleOther(chosen){
var piece_to_hide = document.getElementById("otherValues");
if (chosen == 'oth') {
piece_to_hide.style.display = 'block';
} else {
piece_to_hide.style.display = 'none';
document.myform.other.value = '';
}
}
// ... snip ...
<div id="otherValues" style="display:none">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
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.