Country, State, City Dependent Drop Down

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
clcastine
Forum Newbie
Posts: 2
Joined: Thu Jul 25, 2002 6:02 pm
Location: Colorado Springs, CO

Country, State, City Dependent Drop Down

Post by clcastine »

I am new to all of this and I'm totally lost. :(
I have the following 'Customer' table in a MySQL database:

CustomerID
CustomerName
Address
City
StateProv
PostalCode
Country

There are numerous customers and I need three drop down
menus that allow the user to select a Country then based
on that country, the next drop down list will list the
states for that country. After a state is selected the
third drop down box will contain a list of the cities
for that state. There will be a button at the bottom of
the lists (Display List) this sends these choices to a
new page that displays only the customers for the country,
state and city chosen. I need for all of the data to come from
the database, no external arrays.

I was told that JavaScript needed to be added to the
program. Some one who is supposed to know about JavaScript
gave me the following, it doesn't work right. The first box
does list the countries, but nothing happens with the
onChange. I don't have enough experience to even know if
the correct things are being passed to the database.
Can anyone tell me what needs to be done??
Do I need to take out the PHP? Help, Please, I'm tearing
my hair out!! :cry:

Code: Select all

<?php
   include('db.php');
   mysql_select_db($dbname);
?> 
<p> 		
	<FORM name="searchData" method=post action="displayList.php"> 
    
		<font face="Verdana, Arial, Helvetica, sans-serif" size="4">  <font size="4"> Choose 
        a Country:
		  
		  <SELECT NAME="selectCountry" <SCRIPT LANGUAGE="JavaScript"> onChange="document.open('findCountry.php?Country=document.searchData.selectCountry')" </SCRIPT>  > 

          <?
		    $cname = mysql_query("SELECT DISTINCT (Country) FROM `Customer` ORDER BY Country ASC ");
			
            while($row_cname = mysql_fetch_array($cname))
            &#123;
               if($row_cname&#1111;0] == $row_cname&#1111;Country])
               &#123;
				printf ("<option value==$row_cname&#1111;0] selected>  $row_cname&#1111;0]</option> ");
               &#125;
            &#125;
			printf ("<option selected>  Select a Country  </option> ");
			?> 
          </select> 
         </font> 
<br> 
<br> 
        <font face="Verdana, Arial, Helvetica, sans-serif" size="4"> Choose a State:

        <? if (document.searchData.selectCountry !="")
		&#123;?> 
        <select name="selectState" <SCRIPT LANGUAGE="JavaScript">  onChange="document.open('findCountry.php?Country=document.searchData.selectCountry&StateProv=document.searchData.selectState')"</SCRIPT>  > 
           <?
           $sname = mysql_query("SELECT DISTINCT (StateProv) FROM `Customer` WHERE Country='document.searchData.selectCountry' ORDER BY StateProv ASC ");

            while($row_sname = mysql_fetch_array($sname))
            &#123;
               if($row_sname&#1111;0] == $row_sname&#1111;StateProv])
			   &#123;
                  printf ("<option value==$row_sname&#1111;0] selected>  $row_sname&#1111;0]</option> ");
			   &#125;
            &#125;
			printf ("<option selected>  Select a State  </option> ");
        &#125;?> 
        </select> 
        </font>  
<br> 
<br> 
        <font face="Verdana, Arial, Helvetica, sans-serif" size="4"> Choose a City:</font>  

        <? if (document.searchData.selectState !="")
		&#123;?> 
        <select name="selectCity" <SCRIPT LANGUAGE="JavaScript">  onChange="document.open('findCountry.php?Country=document.searchData.selectCountry&StateProv=document.searchData.selectState&City=document.searchData.selectCity')" </SCRIPT>  > 
          <?
            $tname = mysql_query("SELECT DISTINCT (City) FROM `Customer` WHERE Country='document.searchData.selectCountry' AND StateProv='document.searchData.selectState' ORDER BY City ASC ");

            while($row_tname = mysql_fetch_array($tname))
            &#123;
               if($row_tname&#1111;0] == $row_tname&#1111;City])
			   &#123;
                  printf ("<option value==$row_tname&#1111;0] selected>  $row_tname&#1111;0]</option> ");
			   &#125;
            &#125;
			printf ("<option selected>  Select a City  </option> ");
		&#125;?> 
        </select> 
        </font>  
		
               <div align="center"> 
                  <center> 
                    <p> <span style="font-family: Verdana, Arial"> 
                     <input type="submit" value="Display List" >
                       </span></p>
                  </center>
                </div>
 
      </form>
User avatar
haagen
Forum Commoner
Posts: 79
Joined: Thu Jul 11, 2002 3:57 pm
Location: Sweden, Lund

Post by haagen »

Hi there.

The whole select thing looks strange. I would have made it this way.

Code: Select all

<html>
<head>
<script language="JavaScript">
<!--
function doDropBoxChange()&#123;
  url = 'findCountry.php?cuntry=';
  url = url + document.searchData.selectCountry.value.asString();
  url = url + '&StateProv=';
  url = url +document.searchData.selectState.value.asString();

  document.open(url);
&#125;
-->
</script>
Code untested. I don't know if you need use have the toString() method, if it don't work try without it. To reload the document you can also try document.location.href = url.

Your html select tag should look something like this:

Code: Select all

<SELECT NAME=searchData onChange="doDropBoxChange()">
You probably don't want to reload the page before the both your select boxes are change. You control this with JavaScript as well.

This post should actually be posted in the ClientSided forum, not in the database. :!:
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

This post should actually be posted in the ClientSided forum, not in the database.
Abra-kadabra...

Mac
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Oh, and I think it is probably important that you read this:
http://www.devnetwork.net/forums/viewtopic.php?t=1030

If you want to be selecting stuff from the database as people chose other options then you're going to have to realise that PHP and Javascript can't interact directly.

Mac
clcastine
Forum Newbie
Posts: 2
Joined: Thu Jul 25, 2002 6:02 pm
Location: Colorado Springs, CO

Post by clcastine »

Mac,

I read the reference that you gave, that's why I asked about taking PHP out. Can what I want to do be done with JavaScript alone?

Connie
Post Reply