www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

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

  1. #1
    Join Date
    Jun 2010
    Posts
    53

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

    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.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.

    ^_^

  3. #3
    Join Date
    Jun 2010
    Posts
    53
    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.

  4. #4
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.

    ^_^

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434
    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.

  6. #6
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    607
    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.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question

    Quote Originally Posted by jalarie View Post
    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?

  8. #8
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    607
    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

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

    Lightbulb Try this ...

    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!
    Last edited by JMRKER; 01-03-2011 at 11:12 PM.

  10. #10
    Join Date
    Jan 2011
    Posts
    5

    Exclamation 'length' is null or not an object

    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,

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Something to try ...

    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.

  12. #12
    Join Date
    Jan 2011
    Posts
    5
    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

  13. #13
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question Not sure what's going on here...

    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.

  14. #14
    Join Date
    Jan 2011
    Posts
    5
    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!

  15. #15
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Question Can you show changes made ...

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

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