Cascaded Dropdown in jQuery Ajax, PHP and MySQL

Hi Guys, We are getting good response for our simple tutorial on Cascaded drop down with jQuery, Ajax and PHP. In comments and emails I am usually asked on how to save the value back to database. So In this post we will see that. In our previous cascaded dropdown tutorial we were populating the drop down fields from database tables. Now in this post we will see how we can save the city, state and country ID’s in another table. An example would be on a user registration page user enters his details and then for location he selects the country, state and city. Ideally we only need city ID to be saved in “user” table as we can fetch state and country via SQL from primary tables. But we will save all three ID’s for city, state and country.

cascaded

    Live Demo

                             


Now lets take a look at the code. We have created an additional table named “tbl_user_data” to save the dropdown values. Below is the SQl query to create the table:


CREATE TABLE IF NOT EXISTS <code>tbl_user_data</code> (
 <code>UID</code> int(11) NOT NULL AUTO_INCREMENT,
 <code>cityID</code> int(5) NOT NULL,
 <code>stateID</code> int(10) NOT NULL,
 <code>countryID</code> int(11) NOT NULL,
 PRIMARY KEY (<code>UID</code>)
);

You will get the cascade.sql file in demo file, you can use that to create all the four tables and dump some dummy data.

In Index.php we have just included the dropdown fields in a form to catch the values easily and pass them to insert_data.php. Below is the jQuery code for that:

</p>
$(document).ready(function(){
$("#savecascade").submit(function(){
var get_data=$("#savecascade").serialize();
$.ajax({
 type: "POST",
 url: "inser_data.php",
 data: {"csc":get_data},
 cache: false,
 success: function(html) {
 alert(html);
 }
 });
return false;
});
<p style="text-align: justify;">

Below is the code for insert_data.php:

</p>
<?php
include("connection.php");
if(isset($_POST['csc'])){
parse_str($_POST['csc'],$arr);
if(isset($arr['city']) && $arr['city'] !=''){
$obj = New casCade();
$obj->insert_user_data($arr,$con);
$value=$obj->get_country($arr['city'],$con);
echo "Your Data Successfully Saved.";
}else{
echo "Please select all details.";
}
}

class casCade{

function insert_user_data($arr,$con){
$city =$arr['city'];
$state =$arr['state'];
$country =$arr['country'];
$query = "INSERT INTO tbl_user_data VALUES (NULL, '$city', '$state', '$country')";
$con->query($query);
$con->close();
}
<p style="text-align: justify;">

We have also added a function called get_country. You can use this function to retrieve users location by passing city ID. I hope now its pretty clear and it can be implemented easily in your web projects. Please download the source code file to get complete code. I hope it will help you guys in someway or other. Please share this post with your friends 🙂

About sanjeev

sanjeev
Dreamer, Blogger and Thinker. I love to help people in solving their problems. You can also join me HERE

Related posts:

11 Responses so far.

  1. I have been following this and other tutorials on the same style and I can’t seem to make it work. Since I have tried other tutorials besides this one I think it must be on the server side of the code. I created my tables and have data in them with ids. I have a successful connection to the database. but it never populates the drop down menu with my tbl_country data. Any ideas out there?

  2. I have been following this and other tutorials on the same style and I can’t seem to make it work. Since I have tried other tutorials besides this one I think it must be on the server side of the code. I created my tables and have data in them with ids. I have a successful connection to the database. but it never populates the drop down menu with my tbl_country data. Any ideas out there?

    I am also facing the same problem.

    I have made my own tables same as on localhost. but when I running my code on localhost, in country their is no data.

    help me??

  3. In Index. php File , you have added a Script code

    $(document).ready(function(){
    $(“#savecascade”).submit(function(){
    var get_data=$(“#savecascade”).serialize();
    $.ajax({
    type: “POST”,
    url: “inser_data.php”,
    data: {“csc”:get_data},
    cache: false,
    success: function(html) {
    alert(html);
    }
    });
    return false;
    });

    I can’t understand the meaning of

    data: {“csc”:get_data},

    that line. CSC is what ??? from where we are getting our data.

    Their is no code for csc.

    1. Hi,

      get_data variable has all the serialized data. This line var get_data=$(“#savecascade”).serialize();. We assign get_data’s value to CSC and pass it on to other files via Ajax.

  4. Hello,

    How to submit country, state and city combos to fetch new data on MYSQL server ?

    I am trying to use submit botton and form action=”somethingtodo.php”

    I think that Iam wrong !!!

  5. hi

    I need to set variable value just after selecting any or only last of dropdowns depending on selected value. I don’t want to press submit button.

    could you help me to get it?

  6. Hi ,

    I would like to retreive the values of country_id, state_id and city_id in index.php to be able to implement other functionalities based on these values.

    I use a Session Variable .
    this variable is initialzed in index.php and updated in insert_data.php.
    I can’t retrieve the values in index.php.

    Do you have an idea on how I can proceed?
    thank you for your help.

    Note I put a session_start in index.php and insert_data.php.

Comments are closed.