ajax php drop down list

Question

Can some one tell me what's wrong with this example code on this site http://www.x-developer.com/php-scripts/loading-drop-downs-with-ajax-php-and-fetching-values-from-database-without-refreshing-the-page

Basically i did exactly the same as in the turorial and the problem is that the 2nd drop down list is no showing anything. I read one of the comments that someone forgot to add in some javascript on the page. How do i do this?

I have tried posting a question on that site but no one answered for a week now so I came here.

Any help would be much appreciated.

this is my index.php page

<?php
include('cn.php');

$sql_country = "SELECT * FROM COUNTRY";
$result_country = mysql_query($sql_country);

echo "<select name='country' onChange='get_cities(this.value)'>"; //get_cities is defined below

while($row_country = mysql_fetch_array($result_country))
{
echo "<option value='".$row_country['id']."'>".$row_country['country']."</option>";
}

echo "</select>";

echo "<select name='city' id='city'></select>"; //We have given id to this dropdown

?>

this is my get_cities.js page

function get_cities(country_id)
{
$.ajax({
   type: "POST",
   url: "cities.php", /* The country id will be sent to this file */
   beforeSend: function () {
  $("#city").html("<option>Loading ...</option>");
    },
   data: "country_id="+country_id,
   success: function(msg){
     $("#city").html(msg);
   }
   });
 }

This is my cities.php page

<?php

include('cn.php');

// Code for cities.php
$country_id = $_REQUEST['country_id'];

$sql_city = "SELECT * FROM CITY WHERE country_id = '".$country_id."'";
$result_city = mysql_query($sql_city);
echo "<select name='city'>";

while($row_city = mysql_fetch_array($result_city))
{
echo "<option value='".$row_city['id']."'>".$row_city['city']."</option>";
}

echo "</select>";

?>

The included 'cn.php' is just my connection to the database.

Let us see what code you have so we can check what yo are doing? — karmafunk, Mar 14 '13 at 16:59
can you checked the console. use firebug and check in console. — Sibiraj PR, Mar 14 '13 at 17:00
Did you make sure to put the php code in the php file, and include jquery? — alexyorke, Mar 14 '13 at 17:01
The problem is that the exampled code is using mysql_* functions. — Daryl Gill, Mar 14 '13 at 17:05
I have now edited the original question to include the scripts i made — kev, Mar 14 '13 at 17:08
You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 14 '13 at 17:08
@ Quentin I am only trying to see if i could get this script working so i can somehow then have an idea of how to put things together in my project — kev, Mar 14 '13 at 17:12
Sorry for the newbie questions, I am only new to coding so anything you describe needs to be in detail and easy to understand. — kev, Mar 14 '13 at 17:14

Jay Bhatt · Accepted Answer · 2013-03-14T18:08:30.483

3

//Index.php
<?php
$conn = mysql_connect("localhost", "root", "root");
$db = mysql_select_db("country_example", $conn);

$sql_country = "SELECT * FROM country";
$result_country = mysql_query($sql_country);

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Country List</title>
</head>
<body>
<?php 

echo "<select name='country' onChange='get_cities(this.value)'>";

while($row_country = mysql_fetch_array($result_country))
{
    echo "<option value='".$row_country['id']."'>".$row_country['country']."</option>";
}
echo "</select>";
echo "<div id='cityLayer'><select name='city' id='city'></select></div>";
?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript"> 
    function get_cities($country_id){
     $.ajax({
         url : "city.php?country_id="+$country_id,
         cache : false,
         beforeSend : function (){
              //Show a message
         },
         complete : function($response, $status){
             if ($status != "error" && $status != "timeout") {
                 $('#cityLayer').html($response.responseText);
             }
         },
         error : function ($responseObj){
             alert("Something went wrong while processing your request.\n\nError => "
                 + $responseObj.responseText);
         }
     }); 
    }
 </script>
</body>
</html>

//City.php
<?php

$conn = mysql_connect("localhost", "root", "root");
$db = mysql_select_db("country_example", $conn);

$country_id = $_REQUEST['country_id'];
$sql_city = "SELECT * FROM cities WHERE country_id = '".$country_id."'";
$result_city = mysql_query($sql_city);

echo "<select name='city'>";
while($row_city = mysql_fetch_array($result_city))
{
    echo "<option value='".$row_city['id']."'>".$row_city['city']."</option>";
}
echo "</select>";
?>

edited Mar 14 '13 at 18:08

answered Mar 14 '13 at 17:12

Jay Bhatt

5,601
5
40
62

Not tested but should work.. – Jay Bhatt Mar 14 '13 at 17:15
@ Jay Bhatt The code you gave above shows this error "Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp\www\test\index.php on line 7" and "Notice: Undefined index: country_id in C:\wamp\www\test\index.php on line 17" – kev Mar 14 '13 at 17:18
@kev that means that the value of $result_country is false. Did you add in your database connection? – ioums Mar 14 '13 at 17:21
Include include('cn.php'); in your script.. – Jay Bhatt Mar 14 '13 at 17:23
post the output of http://localhost/test/city.php?country_id=10 – Jay Bhatt Mar 14 '13 at 17:24
Sorry what do you mean the output of the above? Where do i put the javascript bit in? – kev Mar 14 '13 at 17:26
Call the script which gets cities from database with the parameter country_id=10. If the script name is city.php then call it like city.php?country_id=10 and let me know whether it shows you data or error... – Jay Bhatt Mar 14 '13 at 17:28
Also have you included Jquery in your script? The Ajax function used in javascript requires Jquery....Add following to your country file.. – Jay Bhatt Mar 14 '13 at 17:32
Parse error: syntax error, unexpected '<' in C:\wamp\www\test\index.php on line 3. This error is showing when i paste the above in the countries file. Maybe i put it incorrectly? Where should i paste it in the country file? – kev Mar 14 '13 at 17:35
The javascript function, is that meant to be saved in a .js file ? – kev Mar 14 '13 at 17:40
It should be in the country file. See the updated answer... – Jay Bhatt Mar 14 '13 at 17:43
ok i will try this thnx – kev Mar 14 '13 at 17:45
The code contains two different files and depending on your city file change the value of this line url : "cities.php?country_id="+$country_id, – Jay Bhatt Mar 14 '13 at 17:46
Wait...will send you the code... – Jay Bhatt Mar 14 '13 at 17:54
http://theitbranch.com/transfer/country.zip working code... – Jay Bhatt Mar 14 '13 at 18:05
@ Jay Bhatt Sorry for the long response and Thnx for the help, i will try your code! – kev Mar 14 '13 at 19:06

ajax php drop down list

1 Answers1

Linked