www.webdeveloper.com
Results 1 to 6 of 6

Thread: Select Dropdown, no submit

  1. #1
    Join Date
    Apr 2009
    Posts
    3

    Select Dropdown, no submit

    I have an issue where I can make a drop down easily work with no submit button but in my example where I have the OnChange already in use it for some reason does not work or I am not sure how to do this to get it to work correctly. I am not great at writing javascript...just manipulating it.

    Original Code Using Submit Button (This shows the OnChange in use calling a large array list of cities and states)
    Code:
    <form name="dropdown" method="get" action="http://www.x.org/area/dma_retrieve.php?<?php echo "state=$state&city=$city&station=$station"; ?>">
         <center>
    <select style="width:180px;font-size:10px;font-family:verdana;" onChange="update(this,states)" size="1" name="state"><option selected name="formstate"><b> Select State </b></option></select>
         <img src="http://www.x.org/images/spacer.gif" width="200" height="10" alt=""><br>
            <select style="width:200px;font-size:10px;font-family:verdana;" onChange="update(this,city);" size="1" name="city"><option selected><b>Select your nearest city </b></option></select>
         <img src="http://www.x.org/images/spacer.gif" width="200" height="10" alt=""><br>
            <input type="submit" value="submit"></center>
        </form>

    I want to be able to use something like this: (taken from http://www.java2s.com/Code/JavaScrip...bmitbutton.htm)

    Code:
    <select name="file" size="1"
      onchange="loadPage(this.form.elements[0])"
      target="_parent._top"
      onmouseclick="this.focus()"
      style="background-color:#ffffff">
    
      <option value>Select Page</option>
      <option value> </option>
      <option value="http://www.java2s.com">java2s.com</option>
      <option value="http://www.apple.com">Stevie</option>
    I am sure this is possible but I do not know how to alter the javascript to combine them both so I can get rid of the submit button (the only reason why I am doing this is because there is not enough room for the submit button in the design.

    Thanks again for taking your time to look.

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    947
    Try this - it avoids ugly onevent properties in HTML tags and instead listens for the change.

    You can modify this as you need - or ask if you need more help.

    Code:
    <html>
    
    <head>
    	
    <script>
    
    //when the page has loaded, start listening for changes to drop down selection
    window.onload = function() {
    
        if (!document.all) document.captureEvents(Event.CHANGE); //if not IE, need to initiate the event
    	document.getElementById('myselect').onchange = function() { goToUrlOfSelectedOption(); } //so whenever a change is detected on our select, do the goToUrlOfSelectedOption() function
    
    }
    
    function goToUrlOfSelectedOption() {
    	var selObj = document.getElementById('myselect'); //estsablish element
    	var valOfSelectedOpt;
    	if ((valOfSelectedOpt = selObj.options[selObj.selectedIndex].value).substr(0, 7) == "http://") location.href = valOfSelectedOpt; //go to value of selected option, if it starts with http://
    }
    
    </script>
    
    </head>
    
    <body>
    
    <select id="myselect">
    <option selected="selected">--- select a site ---</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.mitya.co.uk/dogs">Christmas Dogs</option>
    </select>
    
    <a href="#" id="asd">asd</a>
    
    </body>
    
    </html>

  3. #3
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    or simply
    Code:
    <select onchange="location.href=this.value">
    <option selected="selected">--- select a site ---</option>
    <option value="http://www.google.com">Google</option>
    <option value="http://www.mitya.co.uk/dogs">Christmas Dogs</option>
    </select>

  4. #4
    Join Date
    Apr 2009
    Posts
    3
    Thanks for your replies but maybe I was not as clear as I could have been. My big problem is I do not have a scenario where each option is listed, it's dynamically populated above from a script file. I'll include the 3 part process from (2 scripts, body onload, lastly the form.

    Script that populates the options: (shortened this up because it was over 500 lines long.....
    Code:
    <SCRIPT language=JavaScript type=text/javascript>
    var states = new Array(
    new Array("dropdown","state","city"),
    
    new Array(true,"AL|Alabama","Anniston-Tuscaloosa"),
    	new Array(true,"AL|Alabama","Columbus"),
    	new Array(true,"AL|Alabama","Montgomery-Selma"),					
    new Array(true,"AK|Alaska","Anchorage"),
    	new Array(true,"AK|Alaska","Fairbanks"),
    	new Array(true,"AK|Alaska","Juneau"),
    new Array(true,"AZ|Arizona","Phoenix"),
    	new Array(true,"AZ|Arizona","Tucson-Sierra Vista"),
    	new Array(true,"AZ|Arizona","Yuma-El Centro"),							
    new Array(true,"WY|Wyoming","Casper-Riverton"),
    	new Array(true,"WY|Wyoming","Cheyenne-Scottsbluff")
    );
    </SCRIPT>

    You most likely do not need to read this next code as it just makes sure that if the first drop down is selected "state" only list the "cities" in the second drop down that are in the state. This works because of the array above.

    Like I said, you probably will not need to read this code right here....
    Code:
    function update(e, dd)
    {
    	for (j=1; j < dd.length; j++)
    	{
    		dd[j][0] = true;
    	}
    
    	for (j=1; j < dd[0].length; j++)
    	{
    		for (i=1; i < dd.length; i++)
    		{
    			current = dd[i][j].split("|");
    			value = current[0];
    			choice = current[0];
    			if (current.length == 2) choice = current[1];
    			if (value != document[dd[0][0]][dd[0][j]][document[dd[0][0]][dd[0][j]].selectedIndex].value) dd[i][0] = false;
    		}
    		if (e == document[dd[0][0]][dd[0][j]])
    		{
    			dropdown(j+1,dd);
    			for (k=j+2; k < dd[0].length; k++)
    			{
    				document[dd[0][0]][dd[0][k]].length = 0;
    			}
    			break;
    		}
    	}
    }
    
    function dropdown(item,dd)
    {
    	var pre1 = "";
    	var j = 1;
    	document[dd[0][0]][dd[0][item]].options.length = 0;
    	document[dd[0][0]][dd[0][item]].options[0] = new Option('Select ' + dd[0][item], '');
    	document[dd[0][0]][dd[0][item]].options[0].selected = true;
    	for (i=1; i < dd.length; i++)
    	{
    		if (dd[i][0] || item == 1)
    		{
    			current = dd[i][item].split("|");
    			value = current[0];
    			choice = current[0];
    			if (current.length == 2) choice = current[1];
    			if (value != pre1)
    			{
    				var op = new Option(choice, value);
    				document[dd[0][0]][dd[0][item]].options[j] = op;
    				j++;
    				pre1 = value;
    			}
    		}
    	}
    }

    body tag, loads states into the first drop down
    Code:
    <body onLoad="dropdown(1,states);">

    And last, the form:
    Code:
    <form name="dropdown" method="get" action="http://www.thegreatestsave.org/area/dma_retrieve.php?<?php echo "state=$state&city=$city&station=$station"; ?>">
    <center>
    <select style="width:180px;font-size:10px;font-family:verdana;" onChange="update(this,states)" size="1" name="state"><option selected name="formstate"><b> Select State </b></option></select>
    <img src="http://www.thegreatestsave.org/images/spacer.gif" width="200" height="10" alt=""><br>
    <select style="width:200px;font-size:10px;font-family:verdana;" onChange="update(this,city);" size="1" name="city"><option selected><b>Select your nearest city </b></option></select>
    <img src="http://www.thegreatestsave.org/images/spacer.gif" width="200" height="10" alt=""><br>
    <input type="submit" value="submit"></center>
    </form>
    The reason why i think this can not work as you are replying is because onChange is already being used in the above code and if replaced the drop down will not work properly, so my question is how do I use both onChange events so it can work?

    example of my onChange in use
    Code:
    <select style="width:200px;font-size:10px;font-family:verdana;" onChange="update(this,city);" size="1" name="city"><option selected><b>Select your nearest city </b></option></select>

    If i was to use one of your codes you listed it would be like this to show you where I am a noob at JS
    Code:
    <select style="width:200px;font-size:10px;font-family:verdana;" onChange="update(this,city);" onChange="location.href=this.value" size="1" name="city"><option selected><b>Select your nearest city </b></option></select>

    As you can see I put two onChange back to back and I am pretty sure this will cause it to error?

  5. #5
    Join Date
    Feb 2003
    Location
    Chicago, IL
    Posts
    1
    onChange="update(this,city);" onChange="location.href=this.value"
    There is no rule that says you can only run one command in an onChange event.


    I'm not sure why you want to update the city dropdown AND jump to a new page at the same time, but try this:
    Code:
    onChange="update(this,city); location.href=this.value"

  6. #6
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Based on the code you posted, I'm not sure what problem you are trying to solve.
    As weevil noted, it makes little sense to update your 'city' selector then jump to a new page.
    Why do you need to update the city selector anyway?

    Your code seems overly complex. Here's a simplified version
    The 'state' selector does not need to be dynamic (it's dynamic here).
    That can be populated using PHP eliminating the 'states' array and the onload event

    The 'city' onchange event can simply submit the form and, if you use method="post", you will not need the query string.
    (you may need to add a 'hidden' field for the 'station' currently in your query string)
    Code:
    <script type="text/javascript">
    var states = new Array("Alabama","Alaska","Arizona","Wyoming");
    var cities = new Array(
    	["Anniston-Tuscaloosa","Columbus","Montgomery-Selma"],
    	["Anchorage","Fairbanks","Juneau"],
    	["Phoenix","Tucson-Sierra Vista","Yuma-El Centro"],
    	["Casper-Riverton","Cheyenne-Scottsbluff"]
    );
    
    function update(idx) {
    	dropdown(cities[idx], 'city')
    }
    
    function dropdown(ary, obj) {
    	var dfe = document.forms[0][obj];
    	dfe.options.length = 0;
    	for (var i in ary) { dfe.options[i] = new Option(ary[i], i); }
    }
    </script>
    </head>
    
    <body onload="dropdown(states,'state')">
    <form method="get" action="http://www.thegreatestsave.org/area/dma_retrieve.php">
    <center>
    <select onchange="update(this.value)" name="state"><option> Select State </option></select><br>
    <select onchange="submit()" name="city"><option> Select your nearest city </option></select><br>
    <input type="submit" value="submit">
    </center>
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles