Member Avatar for raghujosh

I have a Javascript function that allows the display of a textbox upon selecting an option from a dropdown menu. In my case when a user selects listbox as the option, the text box appears. I want the same thing to happen when another option (checkbox) is selected. when I repeat the JAVAscript code, the first textbox(listbox's textbox) appears irrespective of which option(listbox, checkbox) I select. I want to be able to appear/disappear only the respective textbox.

Here is my code.

<html>
<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';
 }

</script>

<head>

</head>
<body onload = "hidefield(), hidefield2()">

<form action = "test3.php" method = "post">

Please enter a name for the App <input type = "text" name = "name">

<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)">
						    <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></td></tr>


</table>

<input type = "submit" value = "Submit">
</form>

</body>

</html>
  • 2 Contributors
  • 2 Replies
  • 6K Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by raghujosh
Member Avatar for tomato.pgn

take a look at thgi...this might be useful for ur query....

<html>
<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){	
document.getElementById("textbox").style.display='none'; //hide textbox
document.getElementById("otherOpt").style.display='block'; //show other options
}
else{	
document.getElementById("otherOpt").style.display='none'; //hide other options
document.getElementById("textbox").style.display='block'; //show textbox
}
}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input type="radio" name="rad" value="0" onclick="doClick(this)">Other options
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
<tr>
<td>
<input type="radio" name="rad" value="1" onclick="doClick(this)">Show textbox
</td>
<td>
<div id="textbox" style="display:none">
<input type="text" name="txt">
</div>
</td>
</form>
</body>
</html>
Member Avatar for raghujosh

take a look at thgi...this might be useful for ur query....

<html>
<head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){	
document.getElementById("textbox").style.display='none'; //hide textbox
document.getElementById("otherOpt").style.display='block'; //show other options
}
else{	
document.getElementById("otherOpt").style.display='none'; //hide other options
document.getElementById("textbox").style.display='block'; //show textbox
}
}
</script>
</head>
<body>
<form name="myform">
<table>
<tr>
<td>
<input type="radio" name="rad" value="0" onclick="doClick(this)">Other options
</td>
<td>
<div id="otherOpt" style="display:none">
<input type="radio" name="rad2" value="0">Option 1
<input type="radio" name="rad2" value="1">Option 2
</div>
</td>
<tr>
<td>
<input type="radio" name="rad" value="1" onclick="doClick(this)">Show textbox
</td>
<td>
<div id="textbox" style="display:none">
<input type="text" name="txt">
</div>
</td>
</form>
</body>
</html>

Thank you very much. You have given me something additional to my needs. Actually, my problem was due to a syntax error. The script works just fine.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.