How to? Dynamice State and City Form with JS

mickth · Jun 5, 2004

Hello all,
I'll start by saying that I am new to JS. I'm also learning PHP, and one of the things I want to do for a project I'm working on, is have the user submit a registration form. Included in this form, will be State and City. So, I'd like to have the user select a state from a drop down box, then based on what state they are in, have the second drop down box in the form be a list of Cities in that State (not all Cities, just major metro cities that I will define). I don't want to have the script look up a table in MySQL, because I'd rather not have the screen refresh overhead. I'd rather keep the information on the client level, so I thought javascript would be a good choice. Well, I've been looking for days for a script like this, and I've found several examples that are close, but they all seem to have a twist to them that I'm not after, and when I start cutting parts of the script out to fit my need, it doesn't work. Does anyone know of this script already in place somewhere?

-Mick-

13sio · Jun 6, 2004

Here is a simple example,

Code:

<script>
[COLOR=green]//States & Cities info[/color]
var person=new Array();
person[0]=new Array("State0", "City0", "City1", "City2", "Other");
person[1]=new Array("State1", "City3", "City4", "City5", "Other");
person[2]=new Array("State2", "City6", "City7", "City8", "Other");

function getRelCities(uSelect) {
  var theMenu=document.menu.cityMenu;
[COLOR=green]
  //Clear the old options[/color]
  for (var i=theMenu.options.length; i>0; i--) {
    theMenu.options[i]=null;
  }
[COLOR=green]
  //Add the new options[/color]
  if (uSelect>0) {
    for (var i=1; i<person[uSelect-1].length; i++) {
      theMenu.options[i]=new Option(person[uSelect-1][i]);
    }
  }
}

</script>

<body>
<form name="menu">
State:
<select name="stateMenu" onChange="getRelCities(selectedIndex);">
<option>Choose A State</option>

<script>
for (var i=0; i<person.length; i++) {
  document.write("<option>"+person[i][0]+"</option>");
}
</script>

</select>

City:
<select name="cityMenu">
<option>Choose A City</option>
</select>
</form>
</body>

Of course, a further form validation is needed.

mickth · Jun 6, 2004

13sio,
Thanks. I've inserted this as is (before changing the values to real states and cities), and when I click the "Choose a State" arrow, the only option that pops up, is "Choose a Sate". Do I need to somehow add 50 options below the first option that says "Choose a State", one for each state?

-Mick-

13sio · Jun 6, 2004

>>when I click the "Choose a State" arrow,
>>the only option that pops up,
>>is "Choose a Sate".

I tested the code in IE6 & NS7.1. Ideally, it shows as follows,

Code:

State:|Choose A State| City:|Choose A City|
      |Choose A State|
      |State0        |
      |State1        |
      |State2        |

However, person[] stores the name of States and Cities,

Code:

var person=new Array();
person[0]=new Array("State0", "City0", "City1", "City2", "Other");
person[1]=new Array("State1", "City3", "City4", "City5", "Other");
person[2]=new Array("State2", "City6", "City7", "City8", "Other");

You can replace the desired names into the array, e.g.,

Code:

person[0]=new Array("California", "Sacramento", "Other");
person[1]=new Array("Colorado", "Denver", "Other");

mickth · Jun 6, 2004

Well, I guess I'm doing something wrong, but I can't see what. Here is the page. Could you look at view>page source, and see if I've got it in the right spot? I'm using php, and I've got an include(header.inc). Is that part of the problem? I've got all of the JS code in the register.php page. Ignore the fact that the the state/city fields are at the very bottom of the page. I've tried a dozen or so scripts, to try to find one that works. Then when I find one, I'll move the script up to my real form.

http://www.allseniorportraits.com/register_testpopup.php

Could someone Go down and click on "Choose a State", and maybe see what I'm doing wrong?

-Mick-

13sio · Jun 7, 2004

Let's try to remove <script>, as follows

Code:

<script type="text/javascript">
[s]<script>[/s]
//States & Cities info
var person=new Array();
person[0]=new Array("State0", "City0", "City1", "City2", "Other");
person[1]=new Array("State1", "City3", "City4", "City5", "Other");
person[2]=new Array("State2", "City6", "City7", "City8", "Other");
//...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to? Dynamice State and City Form with JS

mickth

Technical User

13sio

Technical User

mickth

Technical User

13sio

Technical User

mickth

Technical User

13sio

Technical User

Similar threads

Part and Inventory Search

Sponsor