www.webdeveloper.com
Results 1 to 9 of 9

Thread: city state selection onSelect Help

  1. #1
    Join Date
    Aug 2009
    Posts
    10

    city state selection onSelect Help

    I have an input box that has a list of States. What I want to do is pop up another box next to it after the user selects a state that will populate with that States cities. I do not want the page to have to reload to populate the city select box.

    I am using PHP and MySql. I do not know anything about Java. Please help

    Here is my input for the states. I do not know where to go from here.


    Code:
    <select name='state'>
    									<option value='Alabama'>Alabama</option>
    									<option value='Alaska'>Alaska</option>
    									<option value='American Samoa'>American Samoa</option>
    									<option value='Arizona'>Arizona</option>
    									<option value='Arkansas'>Arkansas</option>
    									<option value='California'>California</option>
    									<option value='Colorado'>Colorado</option>
    									<option value='Connecticut'>Connecticut</option>
    									<option value='Delaware'>Delaware</option>
    									<option value='District Of Columbia'>District Of Columbia</option>
    									<option value='Federated States of Micronesia'>Federated States of Micronesia</option>
    									<option value='Florida'>Florida</option>
    									<option value='Georgia'>Georgia</option>
    									<option value='Guam'>Guam</option>
    									<option value='Hawaii'>Hawaii</option>
    									<option value='Idaho'>Idaho</option>
    									<option value='Illinois'>Illinois</option>
    									<option value='Indiana'>Indiana</option>
    									<option value='Iowa'>Iowa</option>
    									<option value='Kansas'>Kansas</option>
    									<option value='Lousisana'>Lousisana</option>
    									<option value='Maine'>Maine</option>
    									<option value='Marshall Islands'>Marshall Islands</option>
    									<option value='Marland'>Marland</option>
    									<option value='Massachusetts'>Massachusetts</option>
    									<option value='Michigan'>Michigan</option>
    									<option value='Minnesota'>Minnesota</option>
    									<option value='Mississippi'>Mississippi</option>
    									<option value='Missouri'>Missouri</option>
    									<option value='Montana'>Montana</option>
    									<option value='Nevada'>Nevada</option>
    									<option value='New Hampshire'>New Hampshire</option>
    									<option value='New Jersey'>New Jersey</option>
    									<option value='New Mexico'>New Mexico</option>
    									<option value='New York'>New York</option>
    									<option value='North Carolina'>North Carolina</option>
    									<option value='North Dakota'>North Dakota</option>
    									<option value='Norther Mariana Islands'>Norther Mariana Islands</option>
    									<option value='Ohio'>Ohio</option>
    									<option value='Oklahoma'>Oklahoma</option>
    									<option value='Oregon'>Oregon</option>
    									<option value='Palau'>Palau</option>
    									<option value='Pennsylvania'>Pennsylvania</option>
    									<option value='Puerto Rico'>Puerto Rico</option>
    									<option value='Rhode Island'>Rhode Island</option>
    									<option value='South Carolina'>South Carolina</option>
    									<option value='South Dakota'>South Dakota</option>
    									<option value='Tennessee'>Tennessee</option>
    									<option value='Texas'>Texas</option>
    									<option value='Utah'>Utah</option>
    									<option value='Vermont'>Vermont</option>
    									<option value='Virgin Islands'>Virgin Islands</option>
    									<option value='Virginia'>Virginia</option>
    									<option value='Washington'>Washington</option>
    									<option value='West Virginia'>West Virginia</option>
    									<option value='Wisconsin'>Wisconsin</option>
    									<option value='Wyoming'>Wyoming</option>
    									</select> I want the city select box to go here.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb Modify this ...

    Use this part in your HTML section
    Code:
    <html>
    <head>
    <title>Country-State Selections</title>
    <script type="text/javascript" src="CountryStates.js"></script>
    <script type="text/javascript">
    function setup(ArrStr) {
    	s = document.getElementById('country');
    	var sl = s.options.length;
    	for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
    	var tmp = ArrStr.split('|');
    	for (i = 0; i < tmp.length; i++ ) {
    	  s.options[i] = new Option(tmp[i],tmp[i],false,false);
    	}
    }
    function choice(ndx){
    	s = document.getElementById('states');
    	var sl = s.options.length;
    	for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
    	var tmp = aStates[ndx].split('|');
    	for (i = 0; i < tmp.length; i++ ) {
    	  s.options[i] = new Option(tmp[i],tmp[i],false,false);
    	}
    }
    </script>
    </head>
    <body>
    <select id='country' onchange='choice(this.selectedIndex)'>
    <script type="text/javascript">setup(sCountryString)</script>
    </select>
    <select id='states'></select>
    </body>
    </html>
    Then change the contents of the following external JS file.
    Attached Files Attached Files

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Lightbulb Alternate version ...

    Simpler alternate solution:
    Code:
    <html>
    <head>
    <title> The State Capital Display </title>
    <style type="text/css">
      .style1 {
                margin-top: 19px;
              }
    </style>
     
    <script type="text/javascript"> 
    // For:
    
          STATES = ["Alabama|Montgomery|Birmingham|Mobile",	    
                    "Alaska|Juneau",	    
                    "Arizona|Phoenix",	    
                    "Arkansas|Little Rock",			
    		"California|Sacramento|Los Angeles|Lompoc|San Diego|San Bernardino|San Francisco",	    
    		"Colorado|Denver",	    
    		"Connecticut|Hartford",  
    		"Delaware|Dover",			
    		"Florida|Tallahassee|Miami|Ft. Lauderdale|Orlando|Pensacola|Tampa",	    
    		"Georgia|Atlanta|Savannah|Rome",	    
    		"Hawaii|Honolulu",	    
    		"Idaho|Boise",			
    		"Illinois|Springfield",	    
    		"Indiana|Indianapolis",	    
    		"Iowa|Des Moines",	    
    		"Kansas|Topeka",			
    		"Kentucky|Franfort|Louisville|Boling Green",	    
    		"Louisiana|Baton Rouge",    
    		"Maine|Agusta",	    
    		"Maryland|Annapolis",			
    		"Massachusetts|Boston",   
    		"Michigan|Lansing",	    
    		"Minnesota|Saint Paul",    
    		"Mississippi|Jackson",		
    		"MissouriJefferson City",	    
    		"Montana|Helena",	    
    		"Nebraska|Lincoln",	    
    		"Nevada|Carson City",			
    		"New Hampshire|Concord",   
    		"New Jersey|Trenton",   
    		"New Mexico|Sanda Fe",   
    		"New York|Albany",			
    		"North Carolina|Raleigh",  
    		"North DakotaBismark", 
    		"Ohio|Columbus",	    
    		"Oklahoma|Oklahoma City",		
    		"Oregon|Salem",  	    
    		"Pennsylvania|Harrisburg", 
    		"Rhode Island|Providence", 
    		"South Carolina|Columbia",		
    		"South Dakota|Pierre",    
    		"Tennessee|Nashville",    
    		"Texas|Austin|Dallas|Houston|San Antonio|El Paso|Beaumont|Orange",	    
    		"Utah|Salt Lake City",			
    		"Vermont|Montpelier",	    
    		"Virginia|Richmond",	    
    		"Washington|Olympia",   
    		"West Virginia|Charleston",		
    		"Wisconsin|Madison",	    
    		"Wyoming|Cheyenne"			// No comma on final entry
    	];							
    			 
    function SBoxSetup(IDS,ArrInfo,SFlag) {
    	s = document.getElementById(IDS);
    	var scnt = s.options.length;
    	for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
    	var tmp = [];
    	s.options[s.options.length] = new Option('Select:','',false,false);
    	for (var i=0; i<ArrInfo.length; i++ ) {
    	  tmp = ArrInfo[i].split('|');  // if (tmp[1] == '') { tmp[1] = tmp[0]; }
    	  if (SFlag == '') {
     	    s.options[s.options.length] = new Option(tmp[0],tmp[0],false,false);
    	  } else {
    		if (tmp[0] == SFlag) {
      		  for (var j=1; j<tmp.length; j++) {
       	        s.options[s.options.length] = new Option(tmp[j],tmp[j],false,false);
    	      }
            }
    	  }
    // following not used at this time 	    
    //	  s.options[s.options.length] = new Option(ArrInfo[i],ArrInfo[i],false,false);  // Other needs
    	}
    }
    			   
    </script>
     </head>
    
    <body>
    <select id="States" onclick="SBoxSetup('Capitals',STATES,this.value)">
     <script type="text/javascript">SBoxSetup('States',STATES,'')</script>
    </select>
      
    <select id="Capitals">
     <script type="text/javascript">SBoxSetup('Capitals',STATES,'x')</script>
    </select>
      
    </body>
    </html>
    Add more cities as you require.
    Last edited by JMRKER; 08-22-2009 at 11:18 PM.

  4. #4
    Join Date
    Aug 2009
    Posts
    10

    Thank You....

    That saved me hours of programming in php.
    Thanks a millions. Works great.

    O I used the second thead post...


    I might need some help with some other things later.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    You're most welcome.
    Glad I could help.
    Good Luck!

  6. #6
    Join Date
    Aug 2009
    Posts
    10

    problem

    I found a problem with java I used.

    at times when a user encounters an error the inputBox of the state and city will not post to the database. I tried incorping the string in the name='' tag of each but that will not work at all.

    How do I fix this?

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259
    The script provided was not 'java'. Might need to look at a different forum if a 'java' question/problem

    If 'javascript' question, you will need to provide script being used
    or a link to the problem for us to provide a possible solution.

  8. #8
    Join Date
    Apr 2012
    Posts
    1

    Smile query

    Quote Originally Posted by JMRKER View Post
    Use this part in your HTML section
    Code:
    <html>
    <head>
    <title>Country-State Selections</title>
    <script type="text/javascript" src="CountryStates.js"></script>
    <script type="text/javascript">
    function setup(ArrStr) {
    	s = document.getElementById('country');
    	var sl = s.options.length;
    	for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
    	var tmp = ArrStr.split('|');
    	for (i = 0; i < tmp.length; i++ ) {
    	  s.options[i] = new Option(tmp[i],tmp[i],false,false);
    	}
    }
    function choice(ndx){
    	s = document.getElementById('states');
    	var sl = s.options.length;
    	for (var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
    	var tmp = aStates[ndx].split('|');
    	for (i = 0; i < tmp.length; i++ ) {
    	  s.options[i] = new Option(tmp[i],tmp[i],false,false);
    	}
    }
    </script>
    </head>
    <body>
    <select id='country' onchange='choice(this.selectedIndex)'>
    <script type="text/javascript">setup(sCountryString)</script>
    </select>
    <select id='states'></select>
    </body>
    </html>
    Then change the contents of the following external JS file.


    I have used this code and its working successfully..Thanx a lot 4 that but can u plz explain me how can i choose the value of the countries and states selected and store it in the database

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,259

    Arrow More information needed...

    Quote Originally Posted by rajat5 View Post
    I have used this code and its working successfully..Thanx a lot 4 that but can u plz explain me how can i choose the value of the countries and states selected and store it in the database
    Two things to consider:
    1. Can you provide the "countryState.js" file for testing?
    2. You cannot 'store' anything with JS without using a server-side language. Closest you may come is to use a cookie or localstorage in HTML5 as a temporary data holder. So when you say "and store it in the database", additional programming will be needed beyond just JS.

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