where can i find a form script that updates the "city list" when state is chosen?

**cpkid2** · 12-29-2010 12:17 PM

So, for example, if someone chooses "California" out of the State list (select box), the City list next to it gets updated with all of the cities in California.

**WolfShade** · 12-29-2010 12:52 PM

Not sure if you can do it in pure JavaScript. Sounds more like a dynamic server language would be required (ColdFusion, PHP, ASP, etc.) and I say that because I assume you'd get city names from a database. From what I understand, pure JavaScript cannot access a database (if it can be done, someone please share that with me??)

So it would be a mix of dynamic server language and JavaScript.

^_^

**cpkid2** · 12-29-2010 01:34 PM

Thanks, Wolfshade. This is a related question and I think I'd rather go this route rather than having the select box repopulate with the cities.

Here is what I'm envisioning:

The user selects a state, then in the 'Cities' box, he starts typing the name of his city. However, it autocompletes the name for him based on the state he chose. So if he chose California and started typing in "Los Angeles", it would autocomplete "Los Angeles" for him. Does that make sense? Is there a script out there that can do this? It would be amazing.

**WolfShade** · 12-29-2010 03:22 PM

I've seen events like what you describe, but I've never viewed the script that does that. Even then, you'd still have to use a database - if you manually created a JavaScript array that would contain that data, it would A) be freakin' HUGE, and B) take forever to type it all in, assuming someone hasn't already made one. Heck, who knows.. someone may have already made something like that using an Access database. IDK.

^_^

**JMRKER** · 12-29-2010 07:18 PM

Possibility ...
1. Create 50 external JS or text files containing the cities of each state.
2a. Load individual selected JS files depending on state selected
or
2b. Use ajax to load text files of the cities of each state selected from the DD.

Using auto complete might be possible, but it might get too complicated for you
if you are a beginner.

**jalarie** · 01-03-2011 03:42 PM

I pulled information of cities for each State from http://theus50.com and merged them into a single file to do a similar project. It runs about 1/2 megabyte.

**JMRKER** · 01-03-2011 03:52 PM

Originally Posted by jalarie

I pulled information of cities for each State from http://theus50.com and merged them into a single file to do a similar project. It runs about 1/2 megabyte.

Where is the link to this single merged information file.
In .txt or .js format?

**jalarie** · 01-03-2011 09:08 PM

Mine is a .js file set up the way I wish to use it. It is much too large to post and hasn't been updated in over a year. The first few lines look like this:

Code:

  StateCities=new Array();",
  StateCities['AK']=new Array(  // Alaska
    "Adak",
    "Akiachak",
    "Akiak",
    "...",
    "Yakutat",
  "");  // AK
  StateCities['AL']=new Array(  // Alabama
    "Abbeville",
    "Abernant",
    "Adamsville",
    "...",
    "Zenia",
  "");  // AL

**JMRKER** · 01-03-2011 10:09 PM

Reference the correct external JS "state-cities" file name and try this ...

Code:

<!DOC HTML>
<html>
<head>
<title> State-Cities </title>
<script type="text/javascript"> <!-- src="StateCities.js" -->
// Following information to be loaded from external file shown above
  StateCities=new Array();

  StateCities['AK']=new Array(  // Alaska
    "Adak",
    "Akiachak",
    "Akiak",
    "...",
    "Yakutat",
  "");  // AK

  StateCities['AL']=new Array(  // Alabama
    "Abbeville",
    "Abernant",
    "Adamsville",
    "...",
    "Zenia",
  "");  // AL

  StateCities['FL']=new Array(  // Florida
    "Avalon",
    "Bradenton",
    "Clearwater",
    "Dunnedin",
    "Everglades City",
    "Fort Lauderdale",
    "...",
    "Zypher Hills",
  "");  // FL

  StateCities['TX']=new Array(  // Texas
    "Austin",
    "Brooksville",
    "Clear Lake",
    "...",
    "Uvalde",
  "");  // TX

</script>

<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?p=1132109#post1132109

function showCities(state) {
  var sel = document.getElementById('SBoxCities');
  sel.options.length=0;
  sel.options[0]=new Option('[SELECT]','',true,true);
  var Items = StateCities[state];  // alert('Items:\n'+Items.join('\n'));
  for (var x=0; x<Items.length-1; x++){
    sel.options[sel.options.length]=new Option(Items[x],Items[x],true,true);
  }
  sel.selectedIndex=0;
}

</script>

</head>
<body>
<select id="SBoxStates" name="SBoxStates" onchange="showCities(this.value)">
 <option value="">State</option>
 <script type="text/javascript">
   var str = '';
   for (state in StateCities) { str += '<option>'+state+'</option>'; }
   document.write(str);
 </script>
</select>

<select id="SBoxCities" name="SBoxCities"></select>

</body>
</html>

Attach the JS file to your next post or give a link to the external file for others to use,
and then post any questions you might hav.

Good Luck!

**nyxairdog** · 01-21-2011 04:18 PM

On internet explorer (ver 8.0) I get this error

'length' is null or not an object

example page: http://advancedvisionnetwork.com/sta...selectest.html

Script works fine in Firefox and Chrome, ultimately if you select a state you cannot select a city.

All help is greatly appreciated.

Regards,

**JMRKER** · 01-21-2011 06:27 PM

Don't know if the following will fix anything, but it might help to define the problem...

In this part of the code try adding some alert messages to see what's going wrong.

Code:

  var Items = StateCities[state];  // alert('Items:\n'+Items.join('\n'));
  alert('Length: '+Items.length+'\n'+Items.join('\n'));
  for (var x = 0; x < Items.length - 1; x++){

If that does not help to show the problem, try changing the assignment to:

Code:

//  var Items = StateCities[state];  // alert('Items:\n'+Items.join('\n'));
  var Items = StateCities[state].slice(0);

See if that changes anything ...

Also, does the post #9 work in the specified browser? Same error or not?

Report back with results.

**nyxairdog** · 01-24-2011 11:47 AM

Post #9 is what I am using.

In Chrome and firefox with the alert code It shows length as 2, or higher depending on how many cities i have listed.

In IE it refuses to display the alert, it also changed the error to what is listed below.

Thank you for all your help!

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
Timestamp: Mon, 24 Jan 2011 17:45:27 UTC

Message: 'StateCities[...]' is null or not an object
Line: 308
Char: 4
Code: 0
URI: http://advancedvisionnetwork.com/sta...selectest.html

Message: 'StateCities[...]' is null or not an object
Line: 308
Char: 4
Code: 0
URI: http://advancedvisionnetwork.com/sta...selectest.html

**JMRKER** · 01-24-2011 03:53 PM

I added this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I also tried the following changes:

Code:

// var Items = StateCities[state];  // alert('Items:\n'+Items.join('\n'));
//   var Items = StateCities[state].slice(0);

  alert(StateCities[state]);
  for (x in StateCities) { Items.push(StateCities[x]); }

  alert('Length: '+Items.length+'\n'+Items.join('\n'));
  for (var x = 0; x < Items.length - 1; x++){
    sel.options[sel.options.length]=new Option(Items[x],Items[x],true,true);
  }
  sel.selectedIndex=0;

In each case it appears that MSIE browser does not recognize elements in the StateCities array.
I will try some other things when I get home to my PC.

I do not understand what is going on there ???
Perhaps some other forum members can see the problem associated with the MSIE browser only.

**nyxairdog** · 01-24-2011 06:31 PM

Maybe this helps?

modeep

Join Date: May 2007
Posts: 3
#2: May 19 '07
re: null or not an object error in IE works perfectly in Firefox

found a solution. basically Internet Explorer is crappy and doesnt like the setAttribute property so had to change the onchange handler by directly changing the attrbute for the object like so.
object.onchange = function() {}

Incase anyone has a problem like this i hope the solution helps

Moj

I found another thing saying how the dom object is created in IE , i am trying to find that link...

Thanks again!

**JMRKER** · 01-24-2011 08:23 PM

So what exactly did you change or modify of post #9 to make the MSIE problem go away?

Thread: where can i find a form script that updates the "city list" when state is chosen?

Thread Tools

Display

where can i find a form script that updates the "city list" when state is chosen?

Try this ...

'length' is null or not an object

Something to try ...

Not sure what's going on here...

Can you show changes made ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions