SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Deactivating drop down list upon selection

    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?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, for the input!

    Unfortunately it only works with Internet Explorer
    It doesn't seem to work with FireFox.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works both in IE and firefox for me.

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

  5. #5
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vijiruba View Post
    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.
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  6. #6
    SitePoint Guru DeNasio's Avatar
    Join Date
    May 2001
    Posts
    830
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vijiruba View Post
    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?
    Ballot-Box.net - free polls for webmasters
    FormLog.com - free form processor

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Call the same function in checkbox onClick event.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by muazzez; Apr 17, 2007 at 08:48.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •