Deactivating drop down list upon selection

**DeNasio** · Apr 12, 2007 23:22

Hello,

I have a form with several drop down lists. I want to use javascript to deactivate a certain drop down list when a certain option is selected. Take a look at the example below. In a form I have the following drop down lists:

Which form of transport do you prefer?
<select name="transport">
<option value="Airplane">Airplane
<option value="Train">Train
<option value="Boat">Boat
<option value="Car">Car
</select>

How many miles do you drive per year?
<select name="miles">
<option value="15000-">Less than 15,000
<option value="15000+">More than 15,000
</select>

But the second drop down list should be deactivated when someone selects a transport other than "Car". Does any one know how to do this with javascript?

**vijiruba** · Apr 12, 2007 23:40

Very simple!

Call an onChange Event for the the first list box.

Code:

<html>
<head>
<script>
	function ValidateFn()
	{
		var indexTo = document.getElementById("transport").selectedIndex;
		var vehicle = document.getElementById("transport").options[indexTo].value;
		if(vehicle != "Car") {
			document.getElementById("miles").disabled = true;
		} else {
			document.getElementById("miles").disabled = false;
		}
	}
</script>
</head>
<body>
	<select name="transport" id="transport" onChange="ValidateFn();">
		<option value="Airplane">Airplane
		<option value="Train">Train
		<option value="Boat">Boat
		<option value="Car">Car
	</select>
	<select name="miles" id="miles" disabled>
		<option value="15000-">Less than 15,000
		<option value="15000+">More than 15,000
	</select>
</body>
</html>

**DeNasio** · Apr 12, 2007 23:59

Thanks, for the input!

Unfortunately it only works with Internet Explorer

It doesn't seem to work with FireFox.

**vijiruba** · Apr 13, 2007 00:06

It works both in IE and firefox for me.

Can you plz check it by clearing your browser's cache !.

**DeNasio** · Apr 13, 2007 12:29

Originally Posted by vijiruba

It works both in IE and firefox for me.

Can you plz check it by clearing your browser's cache !.

It appears to be working now. So you were right, it was the browser cache. Thanks for your help.

**DeNasio** · Apr 13, 2007 13:19

Originally Posted by vijiruba

Very simple!

Call an onChange Event for the the first list box.

Code:

<html>
<head>
<script>
	function ValidateFn()
	{
		var indexTo = document.getElementById("transport").selectedIndex;
		var vehicle = document.getElementById("transport").options[indexTo].value;
		if(vehicle != "Car") {
			document.getElementById("miles").disabled = true;
		} else {
			document.getElementById("miles").disabled = false;
		}
	}
</script>
</head>
<body>
	<select name="transport" id="transport" onChange="ValidateFn();">
		<option value="Airplane">Airplane
		<option value="Train">Train
		<option value="Boat">Boat
		<option value="Car">Car
	</select>
	<select name="miles" id="miles" disabled>
		<option value="15000-">Less than 15,000
		<option value="15000+">More than 15,000
	</select>
</body>
</html>

How would your code change if I want to deactive the fields when a checkbox is checked?

**vijiruba** · Apr 16, 2007 22:55

Call the same function in checkbox onClick event.

**muazzez** · Apr 17, 2007 01:28

Code:

  
<body>
<form>
<input type="checkbox" name="chk" onclick="(this.checked)?this.form.miles.disabled=false : this.form.miles.disabled=true;">

	<select name="transport" id="transport" onChange="(this.options[3].selected)?this.form.miles.disabled=false : this.form.miles.disabled=true;">
		<option value="Airplane">Airplane
		<option value="Train">Train
		<option value="Boat">Boat
		<option value="Car">Car
	</select>
	<select name="miles" id="miles" disabled>
		<option value="15000-">Less than 15,000
		<option value="15000+">More than 15,000
	</select>
</form>
</body>

Code:

  
<body>
<form>
<input type="checkbox" name="chk" onclick="this.form.miles.disabled=!this.checked;">

<select name="transport" id="transport" onChange="this.form.miles.disabled=!this.options[3].selected;">
		<option value="Airplane">Airplane
		<option value="Train">Train
		<option value="Boat">Boat
		<option value="Car">Car
	</select>
	<select name="miles" id="miles" disabled>
		<option value="15000-">Less than 15,000
		<option value="15000+">More than 15,000
	</select>
</form>
</body>

User Tag List

Thread: Deactivating drop down list upon selection

Thread Tools

Display

Deactivating drop down list upon selection

Bookmarks

Bookmarks

Posting Permissions