Dependant menus in php using java script method? - php

Question

I am work on HTML and PHP on my project , but I have a problem :
I have a drop down list with countries and I want a nother drop down list to appear with (cities of this country) when user choose a country
I have the countries data base and cities data base ( sql )
I try to use a java script method to do that but it didnt work
this is my code
First : this is the countries drop down list it is work good :
<select name="SelectCountry" id="SelectCountry" onchange="showCity()" >
<?php
$Con= mysql_connect("localhost","root","");
if(!$Con) { die('Could not connect'.mysql_error());}
if(!mysql_selectdb("MyDB",$Con)){die(mysql_error());}
$sql = "SELECT * FROM countries";
$result = mysql_query($sql) or die(mysql_error());
while($row=mysql_fetch_array($result)){
echo ("<option value=\"".$row['CountryID']."\">".$row['Name']."</option>");
}
mysql_close($Con);
Second , this is the java script function showCity() // didnt work any way !!
<script>
function showCity()
{
alert("in the function !!");
Document.write(" <?php echo "<select 'SelectCity' ,'SelectCity'";
echo "</select>";
$theCountry=$_GET['SelectCountry']; // get the country ID
$Con= mysql_connect("localhost","root","");
if(!$Con) { die('Could not connect'.mysql_error());}
if(!mysql_selectdb("MyDB",$Con)){die(mysql_error());}
$sql = "SELECT * FROM cities WHERE cities.Fips=(SELECT Fips FROM countries WHERE CountryID='$theCountry')"; // retrive the cities for the spicific country (work when I enter the ID manully in the sql query e.g CountryID='43')
$result = mysql_query($sql) or die(mysql_error());
while($row=mysql_fetch_array($result)){
echo ("<option value=\"".$row['Fips']."\">".$row['Fullname']."</option>"); // print all the cities in a menu (work when I enter the ID manully in the sql query e.g CountryID='43')
}
mysql_close($Con);
");"; ?> ");
}
</script>
this method is to create a new dropdown list for the spicific country cities when the user change the country by using Onchange Event
I hope you will help me
if there any Questions or misanderstod I am ready to answer or explain
thaaaanks all :)

Answer 1

For your level of experience it would probably be best if all you do by onchange is to submit the form:
<select name="SelectCountry" id="SelectCountry" onchange="this.form.submit();" >
This is equivalent to pressing the submit button after selecting a country. (You are missing </select> in your excerpt by the way, although I expect you just didn't copy that here.)
Then in PHP have something like... (note this code bit needs to be before the dropdown boxes so that the variable is there when you want to echo it)
if ( isset($_GET['SelectCountry']) )
{
$country = $_GET['SelectCountry'];
$citySelect = "<select name='SelectCity'>";
//query DB for cities of that country
...
//now add the options from the query just like you did for the countries, except now use the cities
...
$citySelect .= "</select>";
}
else
{
$citySelect = ""; //to make sure the variable isn't undefined
}
Now you can just add underneath your CountrySelect:
<? echo $citySelect; ?>
If a country was chosen before, the city menu will show.
Note that this does not include even the lowest level of security, fool proofing and it can be very complicated to get a large form to work like this.

Answer 2

$_GET['SelectCountry'] only works when you have the selects in a form tag and you click the submit button to reload the page (which creates the $_GET variable. A simple way to do this would be to add the country to your address URL and that will give you a $_GET too.
So inside the showCity() function, write this:
var i = document.getElementById("SelectCountry").selectedIndex;
var countryValue = document.getElementById("SelectCountry").options[i].text;
window.location.href = '/?SelectCountry='+countryValue;
This will redirect your web page to mysite.com/?SelectCountry=USA or something like that. Then your code will work. This isn't the best way to do it, but it should give you some results.

Answer 3

This doesn't work because $_GET['SelectCountry'] is always going to be null. You're confused about the difference between client side and server side scripting. Once you load the page for the first time, there is no GET variable yet, and so your Javascript is sitting on the browser with no cities. Changing the country doesn't make the getCity() go back to the server. It just looks at what it has already, which is nothing. You need an AJAX function, which has the job of sending GET requests to the server and bringing back the results. Once it gets the list of cities, its going to want to know what you want it to do with that list. You give it a function that makes a dropdown out of them. This is known as a callback. There are a lot of tutorials out there telling you how to make an AJAX function and where to put the callback.