0

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>

Edited by raghujosh: n/a

2
Contributors
3
Replies
6
Views
6 Years
Discussion Span
Last Post by twiss
0

There's a missing } at line 21, and the commas on 33 and 44 should be ; .

Absolutely right on. Your code suggestions fixed it.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.