Making text box visible/invisible

Get Started
1

Hey,

I am trying to do something in terms of making a text box appear and dissapear depending on the selection of a drop down list box.

I have the following code:-


                    <select name="ASOS">
			<option value="0">Choose...</option>
			<option value="Yes">Yes</option>
			<option value="No">No</option>
			</select> <input type="text" name="txt_asoslink"/>

Now when a user selects “Yes” from the drop down i want the text box to appear. Otherwise i dont want it to be visible…

How can i do this?

Regards

2

According to w3schools ( http://www.w3schools.com ) the input tag has no visible property that you can use via javascript. Because of this you must update an element within the page with new html code instead. In your case the html will be for the text box. Therefore you need to use the span tag and give it an id in order to be able to change the html within the span tag and its closing tag.

I wrote this code for you quickly and tested it in IE and SeaMonkey. Not only will it display your text input when ‘Yes’ is selected it will also hide it again if ‘No’ or ‘Choose…’ are re-selected.


<script type="text/javascript">
<!--
function change_input()
   {
   var Select;
   var Input;
   
   Select = document.getElementById('ASOS');
   Input = document.getElementById('input');
   
   if (Select.value == 'Yes')
      {
      Input.innerHTML = '<input type="text" name="txt_asoslink" value="">';
      }
   else
      {
      Input.innerHTML = '';
      }
   }
//-->
</script>

  <select name="ASOS" id="ASOS" onchange="change_input();">
      <option value="0">Choose...</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
   </select>
   
   <span id="input"></span>

You can put the javascript either in the head or the body (which I suggest as you can just copy and paste everything above). Note that you must use the code for the select too as I’ve updated it with an id tag which yours does not have. Just copy all of it and paste it.

Note that when you submit the form the text box value WILL also be submitted to your script with everything else despite it not being visible in the main source code.

Good luck :wink:

3

Perfect mate,

That worked great.

Regards

4

You’re welcome, glad I could help :wink:

5