I have a dropdown box which should display an appropriate text box only when a particualar option is selected. Currently, the textboxes are displayed all the time. I do have a Javascript function that works for 2 options(hides always and displays only when the correct option is selected). But I need it to work for 3 options. Here is the code. You can copy and paste this code as an HTML file and you will know what I refer to.
<html>
<head>
</head>
<script type="text/javascript" >
function showfield(name){
if(name=='lstbox')document.getElementById('div1').style.display="block";
else document.getElementById('div1').style.display="none";
}
function hidefield() {
document.getElementById('div1').style.display='none';
}
function showfield2(name){
if(name=='chkbox')document.getElementById('div2').style.display="block";
else document.getElementById('div2').style.display="none";
}
function hidefield2() {
document.getElementById('div2').style.display='none';
function showfield3(name){
if(name=='radio')document.getElementById('div3').style.display="block";
else document.getElementById('div3').style.display="none";
}
function hidefield3() {
document.getElementById('div3').style.display='none';
}
</script>
<body onload = "hidefield(), hidefield2(), hidefield3()">
<form action = "test6.php" method = "post">
Please enter a name for the App <input type = "text" name = "appname" />
<table border = "1"><tr><th>Choose a Label</th><th>Choose an element</th></tr>
<tr><td><input type = "text" name = "label1" /></td> <td>
<select name = "elementtype1" id="elementtype1" onchange="showfield(this.options[this.selectedIndex].value), showfield2(this.options[this.selectedIndex].value), showfield3(this.options[this.selectedIndex].value)">
<option value = 'select'> Select </option>
<option value='txtbox'>Text Box</option>
<option value='lstbox'>List Box</option>
<option value='chkbox'>Check Box</option>
<option value='radio'>Radio Button</option>
</select></td><td><div id="div1">Enter listbox options: <input type="text" name="whatever1" /></div><div id="div2">Enter checkbox options: <input type="text" name="whatever2" /></div><div id="div3">Enter RadioButton options: <input type="text" name="whatever3" /></div></td></tr>
</table>
<input type = "submit" value = "Submit">
</form>
</body>
</html>