Dependant menus in php using java script method?

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 :)

Your logic is fundamentally flawed here as you're trying to have php pull a value from Javascript. That's impossible as all your PHP code is executed, then all your javascript code is executed (PHP is run on the server, Javascript is run in the browser). In order to separate this in your head logically you might want to put all your PHP code at the top of your javascript file, and save them as global variables. You can't re-run a query with any input from javascript without reloading the page — DaOgre
– DaOgre, Commented Apr 5, 2012 at 23:09

Armatus · Accepted Answer · 2012-04-05 22:52:07Z

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.

answered Apr 5, 2012 at 22:52

Armatus

2,20117 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DaOgre Over a year ago

Yes, redacted and moved, apologies

soso Over a year ago

I have a low experiance with programing can you give me a complete code coz I didnt understand what do you mean , I must delete the javascript function ?? or enter this code inside it ??

Armatus Over a year ago

You would not need any javascript functions for this. As DaOgre explained, PHP code runs before the page is sent to the browser, javascript is executed by the browser itself when it receives it. This is all PHP, so you can just put my code sample right at the top of the page (don't forget <? ... ?>). Although you first need to connect to the DB so you can run your query. Only the "echo" command prints HTML, so it needs to be exactly in the place where the city select should appear once a country is chosen.

Ryan · Accepted Answer · 2012-04-05 23:00:05Z

1

$_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.

answered Apr 5, 2012 at 23:00

Ryan

3,1813 gold badges25 silver badges35 bronze badges

Comments

Chad Hedgcock · Accepted Answer · 2012-04-05 23:04:22Z

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.

Collectives™ on Stack Overflow

Dependant menus in php using java script method?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related