Page 1 of 1

Country, State, City Dependent Drop Down

Posted: Thu Jul 25, 2002 6:02 pm
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>

Posted: Fri Jul 26, 2002 1:09 am
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. :!:

Posted: Fri Jul 26, 2002 2:01 am
by twigletmac
This post should actually be posted in the ClientSided forum, not in the database.
Abra-kadabra...

Mac

Posted: Fri Jul 26, 2002 3:00 am
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

Posted: Fri Jul 26, 2002 11:04 am
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