This demo script you can download the sample code along with table structures – data at the end of this file in zip format.
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.
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.
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.
require "config.php";// connection to database
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.
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.
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.
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.
var optn = document.createElement("OPTION");
optn.text = myarray.data[i].subcategory;
optn.value = myarray.data[i].subcat_id; // You can change this to subcategory
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.
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.
after selecting item from combobox i.e category, population of data in second combobox is not working. im getting empty small box.
any help would be appreciated.
I'm not using 2 option, but 1 option and 1 textarea, need editing on dd.php and main.php. Work well
I've struggled to integrate this into my website for days - - can someone help me? I believe this works, but just can't get it through my thick skull... Thanks for everything!
Thank you for your script. I got it to work but is it possible for the second select option to return both the name and an id from the mysql table ?
For example to return information like this ? Thank you in advance for your help.
Yes , we can use like that and many time we use option and string different data. For that in your sql you can collect both columns and format accordingly. For example we can display student name but keep student ID in option value.
Thanks for pointing out that. I can understand your requirement. The script will be modified accordingly. Give me few hours.
Download fresh copy of script now.See the changes. Now for 2nd dropdown you should get subcat_id as value and subcategory as text part of the dropdown list.Submit the form and see...
Thanks for your reply, i don't know if i downloaded the right one, but there are two things i noticed :
1. In dd.php there is a mistake :
$sql="select subcategory,subcat_id from subcategory where cat_id='$cat_id'";
$sql="select subcategory,cat_id from subcategory where cat_id='$cat_id'";
because of your sql_dump file :
CREATE TABLE `subcategory` (
`cat_id` int(2) NOT NULL default '0',
`subcategory` varchar(25) NOT NULL default ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
I tried running your script, but I get :
$cat = 3
$subcat = undefined
thanks, it is fixed now. SQL is correct. The dump file is updated with subcat_id column. Download a fresh copy. Let us know if you are facing any problem.
ok how do I populate these dropdowns on an edit window? I am using the three drop downs to add a record, but how do I populate all three when I pull up the records to edit?
Actually you are not editing the dropdown. You have to update record or data in table. So you can select dropdowns and arrive at the record to edit. Then the data can be placed in a text box to edit. You can see this record edit script here
It's working great ! I will send you a link of my project once I'm done ! Thank you again !
heloo i am worid i want too show dataa through drop down list i need 4 droap down list