Display a text box when dropdown list says Other

JavaScript
1

I need a text box to display next to a drop down list whenever the drop down list says “other”. Can someone please help, I have no idea how to do this.

2 
<html>
<head>
<style type="text/css">
#bar {visibility:hidden;}
</style>
<script>
function show(el, vis){
	var elem = document.getElementById(el);
	elem.style.visibility = (vis) ? 'visible' : 'hidden';
}
</script>
</head>

<body>
<form>
<input type="radio" name="foo" value="1" onclick="show('bar',false)">1 <br>
<input type="radio" name="foo" value="2" onclick="show('bar',false)">2 <br>
<input type="radio" name="foo" value="other" onclick="show('bar',true)">other
  <span id="bar"><input type="text"></span>
</form>
</body>
</html>
3

Thanks, but I need it in a drop down list. I tried this code, but it doesn’t work…


<html>
<head>
<style type="text/css">
#bar {visibility:hidden;}
</style>
<script>
function show(el, vis){
	var elem = document.getElementById(el);
	elem.style.visibility = (vis) ? 'visible' : 'hidden';
}
</script>
</head>
<body>
<form method="POST">
  <select size="1" name="thename" class="asdf">
  <option selected>--- Choose One ---</option>
  <option onclick="show('bar',false)">choice 1</option>
  <option onclick="show('bar',false)">choice 2</option>
  <option onclick="show('bar',true)">other</option>
  </select><span id="bar"><input type="text"></span>
  <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
4

I was gonna do this using the options’ values to hold the true and false data, but I thought you’d probably need the value for something else…so this should do it

<html>
<head>
<style type="text/css">
#bar {visibility:hidden;}
</style>
<script>
function show(el, txt){
	var elem = document.getElementById(el);
	elem.style.visibility = (txt == 'other') ? 'visible' : 'hidden';
	}
</script>
</head>
<body>
<form method="POST">
  <select size="1" name="thename" class="asdf" onChange="show('bar', this.options[this.selectedIndex].firstChild.nodeValue)">
  <option selected>--- Choose One ---</option>
  <option>choice 1</option>
  <option>choice 2</option>
  <option>other</option>
  </select><span id="bar"><input type="text"></span>
  <input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
5

Thanks a lot!

I guess what I’ll end up doing is giving the option and text box fields different names. Then when the form is submitted if the value of the option is “Other” than I’ll pull the value of the text box.