SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow country x states - form in Java Script

    How can I make a form using Java Script in that I put all the countries and when the user choose one opens in the same form the states for that country?
    Please, someone could help me?
    Thanks

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Including a trip back to the server or using javascript only?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    only using java script.

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this then:

    <head>
    <script language="javascript">
    function addStates(frm)
    {
    var country = frm.country.options[frm.country.options.selectedIndex].text;
    switch (country)
    {
    case 'US':
    frm.state.options[frm.state.options.length] = new Option('Alabama');
    frm.state.options[frm.state.options.length] = new Option('Alaska');
    frm.state.options[frm.state.options.length] = new Option('Arizona');
    //etc
    break;
    }

    }
    </script>
    </head>
    <body>
    <form id="frm">
    <select id="country" onChange="if(this.selectedIndex>0){addStates(this.form)}">
    <option>Select a country...
    <option>US
    </select>
    <select id="state">
    <option>Select a state...
    </select>
    </form>
    </body>

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe you should add this too, before the switch in the function...

    for(var i = frm.state.options.length - 1; i > 0; i--)
    {
    frm.state.options[i] = null;
    }

  6. #6
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, good luck gathering all that information - there are a lot of countries and states in the world! If you do find a good resource for that post it here, as I'm sure other people would also find it useful.

    You could solves this problem with huge javascript arrays, but that would mean your users would have to load up arrays of every state and country in the world when they load your page. An alternative is to use remote scripting, which is a clever (but easy to use) technique that allows a javascript page to load data from a server without having to reload the whole page. There is a remote scripting demo where the choice in one select box causes a different set of options to be loaded in to another select box here:

    http://www.ashleyit.com/rs/jsrs/select/php/select.php

  7. #7
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Of course I do not recommend sending all the states info to the client and then only use one of the arrays, I was only demonstrating the principles of adding options to a second list when selected index in the first list changes

    The remote scripting demo does not work in NS6.2

    Gathering states info; each country's postal services seems to be a good place to search...
    US States
    Canadian Province/Territory Symbols

  8. #8
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by jofa
    The remote scripting demo does not work in NS6.2
    That's odd - it works fine in Mozilla, and it even works in NS4!

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about a JS pseudo remote scripting trip back to the server - no refresh?

    That's what i did!

    I wrote a script that automatically works out what country their in from a couple of things in the browser - and then chooses that in the select box, and shows all the states / counties / whatevers for the country - it runs from an sql database and uses remote scripting to grab the new list of counties / states / whatever.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---


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
  •