Dynamic/ dependent input box

Question

Hi,

How can i make a input box that appears only when i select a value from a drop down box?

thank you, Sebastian

EDIT-1:

thanks guys for the help. but the example from sushil bharwani is best for me, because i also need to display a text with the text box.

but with that example i have a problem. both the text and the text box look like they are in the same cell, so they are messing up my layout for the form. Got any ideas?

thanks,

Answer 1

http://bytes.com/topic/javascript/answers/88791-show-hide-text-form-field-based-drop-down-selection

Answer 2

You'll want to define the select's onchange attribute to check the text (or value) of the selected option:

<script type="text/javascript">
 function checkSelect(el) {
  if (el.options[el.selectedIndex].text.length > 0)
   document.getElementById('text1').style.display = 'block';
  else
   document.getElementById('text1').style.display = 'none';
 }
</script>

<select onchange="checkSelect(this)">
 <option></option>
 <option>Val 1</option>
</select> 

<input type="text" id="text1" style="display:none" />

For further details, you can read more about HTML DOM objects and how to access them via javascript:

http://www.w3schools.com/jsref/default.asp

Answer 3

Consider that the textbox should show when choice 2 is selected

The dropdown box

<select id="dropBox" size="1" onChange="dropBoxChng();">
    <option value="1">Choice 1</option>
    <option value="2">Choice 2</option>
    <option value="3">Choice 3</option>
    <option value="4">Other</option>
</select>

the input box

<input type="text" id="txtBox" style="display:none">

the onchange function

function dropBoxChng(){
    if(document.getElementById('dropBox').value == 2){
        document.getElementById('txtBox').style.display = 'block';
    }
}​

Demo here