Hidden field visible on certain selection...

[jeffcravener]

I have a dropdown list of applications that a user can select from.

When they select one of them, I want there to be an extra field to be shown to enter a toll free number.

So, basically I want the page to have a hidden field on it, and it is only visible if a certain selection is made in the drop down list.

I figure this requires JavaScript, but I can't seem to find anything on how to do it.

Thanks in advance!!

 

[tektipsismyfavorite]

1. put the phone number field in a <div> and place it somewhere on the page where you want it to show up:
<div>field</div>

2. give the <div> and id:
<div id="tollFree">field</div>

3. set the <div> style to display: none:
<div id="tollFree" style="display:none;">field</div>

4. setup a function for "onChange" to the dropdown and make sure it (as well as your form) has an id:
<select id="dropDown" onChange="toggle();">options</select>

5. create your function (before the </head> tag on the page):

function toggle(){
	el = document.getElementById("tollFree");
	if(document.formid.dropDown.value == "tfOption"){
		if(el.style.display == 'none'){
			el.style.display = '';
		}
	} else {
		el.style.display = 'none';
	}
}

5. Substitute "tfOption" for the value of the option in your select where you want the tollFree input to appear.

 

[tektipsismyfavorite]

Also, another thing I would do is add: onblur="toggle();" to your dropDown in case they use the TAB key to go through your form instead of clicking the dropDown.