appear/disappear text box based on selection from a dropdown.

Question

raghujosh 0 Junior Poster

13 Years Ago

I have a page on which I have 2 dropdowns. Both are similar. I have a piece of code that whill make a textbox appear if we select "list Box" as the option in the drop down. But for some reason, the first dropdown works fine, but for the second dropdown, the textbox is always there on page load. Can somebody help in debugging this code. The code that I am presenting can be copied as a HTML page and you will know what I am referring to.

<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=='lstbox')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>


<form action = "test2.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> <body onload="hidefield()">
<select name = "elementtype1" id="elementtype1" onchange="showfield(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></td></tr>


<tr><td><input type = "text" name = "label2" /></td> <td><body onload="hidefield2()">
<select name = "elementtype2" id="elementtype2" onchange="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="div2">Enter Listbox options: <input type="text" name="whatever1" /></div></td></tr>

</table>

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

</body>

</html>

javascript

Edited 13 Years Ago by raghujosh because: n/a

2 Contributors
2 Replies
2K Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by raghujosh

Akash Saikia 9 Junior Poster

13 Years Ago

Hi
My brother you did a serious but silly mistake in the code,that is why is was not working as per your expectations.
You have 3 body tags inside your page,where one is perfect,but two other body tags inside tables TD tag. That too without closing it.

Change your entire html with this...

<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=='lstbox')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 ="hidefield2();hidefield();">


<form action = "test2.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)">
                    <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>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="label2" />
        </td>
        <td>
           
                <select name="elementtype2" id="elementtype2" onchange="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="div2">
                Enter Listbox options:
                <input type="text" name="whatever1" /></div>
        </td>
    </tr>
</table>
<input type="submit" value="Submit">
    </form>
</body>
</html>

Hope it helpss :)
Good luck

Mark it as answer if it helps,so others may take advantage of it...

Reply to this topic

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.

raghujosh 0 Junior Poster · Answer 1 · 2011-04-02T01:22:46+00:00

Hi
My brother you did a serious but silly mistake in the code,that is why is was not working as per your expectations.
You have 3 body tags inside your page,where one is perfect,but two other body tags inside tables TD tag. That too without closing it.

Change your entire html with this...

<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=='lstbox')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 ="hidefield2();hidefield();">


<form action = "test2.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)">
                    <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>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="label2" />
        </td>
        <td>
           
                <select name="elementtype2" id="elementtype2" onchange="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="div2">
                Enter Listbox options:
                <input type="text" name="whatever1" /></div>
        </td>
    </tr>
</table>
<input type="submit" value="Submit">
    </form>
</body>
</html>

Hope it helpss :)
Good luck

Mark it as answer if it helps,so others may take advantage of it...

Thank you much. You were absolutely right. I tried your code and Its working as it should.