Ajax PHP two Dependant drop down list with out reloading page

Two related drop down list by using Ajax & PHP

Please read the basic drop down list box control tutorial. We will try to develop similar functionality by using ,Ajax (asynchronous JavaScript and XML) and PHP. The biggest advantage of using Ajax here is we need not reload the page again. With more form components ( if already filled by visitor ) we have to re-fill all the data once the page reloads. Now without sending all the information back to server we can send only cat_id of selected first category and then we will manage the second list based on cat_id value.

This demo script you can download the sample code along with table structures – data at the end of this file in zip format.

How dropdown list with Ajax script works?

There are three files used in this tutorial.

main.php : Display the category listbox and posts Ajax request.
dd.php : Receives cat_id and collects matching subcategory from table.
mainck.php : Collects the form data and display the same.

main.php

This file first displays a form with three elements, one textbox and two dropdown selection boxes. One Test box is there as part of the form to collect data and it has nothing to do with the main script managing dropdowns. It only explains how other elements can be added to same form.

<form name="testform" method='POST' action='mainck.php'>
Name:<input type=text name=fname>

The first dropdown list box display data of first table category. The table category have two columns, one is cat_id and other is category. In our dropdown box we kept cat_id as option value and category as text part. You can read more on how to populate listbox by taking data from MySQL table here. First we will connects to database using config.php

require "config.php";// connection to database

Here is the code to add option to our first list box.

<?Php
require "config.php";// connection to database 

echo "<br>Select Category first  <select name=cat id='s1' onchange=AjaxFunction();>
<option value=''>Select One</option>";

$sql="select * from category "; // Query to collect data from table 

foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[cat_id]>$row[category]</option>";
}
?>
</select>

In the above code we have used onchange event of listbox to trigger a JavaScript function AjaxFunction().

echo "<br>Select Category first  <select name=cat id='s1' onchange=AjaxFunction();>

Using this function we will collect the value of cat_id of selected category.

var cat_id=document.getElementById('s1').value;

After getting the value of cat_id we will post it to our PHP script dd.php file by GET method. You can read more on how to post data by GET method using Ajax. Here is the code.

	var url="dd.php";
var cat_id=document.getElementById('s1').value;
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
//alert(url);
httpxml.open("GET",url,true);
httpxml.send(null);

dd.php

Now data is posted to dd.php file. We will collect the data and sanitize the same before using in our query. We expect cat_id to be numeric value. In your case if your are using text then you have to change the sanitization code. You can read more on security and injection attack here.

if(!is_numeric($cat_id)){

echo "Data Error";

exit;

 }

If you are not using integer as cat_id then you can go for alphanumeric characters check by using ctype_alnum function. Replace the function inside if condition checking.

Now to get matching record ( matching with cat_id ) we will use second table subcategory. Here is the query

$sql="select subcategory,subcat_id from subcategory where cat_id='$cat_id'";

We will get subcategory data ( subcat_id and subcategory ) from the table as an array. Same array we will use in Jason format and return to data to main.php.

$row=$dbo->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);

$main = array('data'=>$result);
echo json_encode($main);

In our main.php file we will receive the Jason formatted data. We will store data in an array variable myarray.

var myarray = JSON.parse(httpxml.responseText);

First we will remove if any old option is there in our 2nd drop down list showing subcategory.

for(j=document.testform.subcat.options.length-1;j>=0;j--)
{
document.testform.subcat.remove(j);
}

Now we will add options to our 2nd dropdown list. For this we will loop through the array. Note that the total number of elements present inside the array is stored can be found out by myarray.data.length property.

for (i=0;i<myarray.data.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray.data[i].subcategory;
optn.value = myarray.data[i].subcat_id;  // You can change this to subcategory 
document.testform.subcat.options.add(optn);

}

In the above code we have assigned text part and option value part of the 2nd dropdown list to subcategory and subcat_id respectively. If you want you can change this to match your requirement. Once the form is submitted the data assigned to option value only will be carried to next page mainck.php.

echo "\$_POST['fname'] = $_POST[fname]<br>
\$_POST['cat'] = $_POST[cat]<br>
\$_POST['subcat'] = $_POST[subcat]
";

With this our both dropdown boxes are ready for selection. Once you select first listbox then the cat_id will be transported to dd.php file and matching subcategory name and subcat_id is returned and used in second dropdown list box.

You can fill all the data and submit the form to get all values in next page for further processing.

New script with multiple selection drop down list box is used. This part is added in your zip file.