PHP ajax cascading dropdown using MySql
Written by Codes Tips on May 16, 2009 – 5:31 pm -To do cascading drop down in php using mysql we can use AJAX. The name AJAX is from asynchronous JavaScript and XML and it’s a new technique for web development to build rich interactive web application. The power of this technique comes from the fact that it can send to server requests from the client side, in order to not reload the page. The object that is using AJAX to send and retrieve data between server and the client is named XmlHttpRequest.
To build a cascading drop down in php to retrieve data from a mysql server we will first populate a drop down with the results from a first table from a mysql database. The first table is linked with a second table by a field. When we change the drop down we should assign to OnChanging event an Javascript function that will populate the second drop down . The function will create a new XmlHttpRequest object and make a call to other php script, grab data and populate the second drop down. The script that it’s called will fetch the results for that field that was changed.
Watch a demo here:populate drop down using ajax
Download php cascading drop down using mysql
Tags: AJAX, PHP, PHP/MYSQL
Posted in AJAX, Codes, PHP/MYSQL, Scripts |
15 Comments to “PHP ajax cascading dropdown using MySql”
Leave a Comment
You must be logged in to post a comment.
May 23rd, 2009 at 4:55 am
Please, verify download link.I got the message: Could not find anything!
Sorry, but you are looking for something that isn’t here.
May 23rd, 2009 at 6:13 am
Hei Jorgeco,
It was a problem on security, please check again.
July 8th, 2009 at 6:04 am
Hey,
I used your example, I get data from the database for my second pull down. I can see all the values in it fine, but it doesn’t post any value when submitted. If I view the source in the browser there is only :
Even tough the pulldown is filled ?!
What can cause this ?
Thanks
July 8th, 2009 at 6:05 am
One more thing, what are you doing with the ‘nr’ variable ? I don’t see it after the while loop.
July 15th, 2009 at 10:04 am
Hei jmellipse,
I can’t see the source that you posted it, can you re-post it?
Are you saying that the second drop down doesn’t fill in the second drop down?
The variable ‘nr’ it’s not used in code, i forgot it there.
Cheers.
July 16th, 2009 at 1:44 am
Hi there,
You have really very nice post.
But I require help in some other way. Can you please do me some favour..
My requirement is,
I have 1 textbox and 1 submit button. When I write some text into that textbox and click on submit button, related searches or say similar words will be fetched from database.
Now upto here I am able to do, but problem is I want to show all those similar names as auto suggest list and then I select any name from it and it be displayed to that textbox. Its something like auto suggest but I want on click event.
Not able to implement.
I am in need.
Thanks in advance,
Shweta
July 16th, 2009 at 1:33 pm
Hei Shweta,
You can do with a ajax to fetch the results from database without refreshing the page when clicking the submit button.
Then for every result that come from database build a list with tag < ui > and assign to every li elements a javascript onclick event to populate the textbox.
Hope this helps.
July 17th, 2009 at 2:31 am
Hey,
Thanks a ton. It has helped me like coming out of cage aft long days. :)It worked.
thnks
July 17th, 2009 at 5:57 am
Hi there, I am having the same problem that the other user had with missing input information.
I can change the first field, and the AJAX script switched the second field just fine “visually”, the problem is that there is no data being recognized in the second field and it is not being passed as input to the script by the browser. This is most easily seen by setting the drop down boxes, then viewing the source. The source viewer only dispays the original information contained in the second box. This would not normally be a concern for me as the javascript switch may not bee seen by the source viewer, but for some reason the data is really not being passed.
My recommendation is to set up your original demo script to actually submit the data and write it to the database. Any help would be greatly appreciated.
July 17th, 2009 at 6:35 am
IN looking at the code a little further, I think that the issue is that you are performing a change to the DIV with the AJAX function and not actually to the select input box. It appears that the script is essentially writing a second DIV box over top of the original, which is not being recognized as an actual change by the browser. I haven’t yet figured out how to correct this yet. Anyone care to chime in?
July 17th, 2009 at 7:08 am
UPDATE: Ok I fixed the issue. It was not with the formating of your script. I had an HTML problem where the tab was not placed correctly around the table where the input fields were. It would work in IE, but not in FF or Chrome. I fixed my HTML and everything works correctly.
July 17th, 2009 at 9:14 am
Hei fourmat, welcome to Codestips. I am glad you solved your problem, any questions please ask.
July 17th, 2009 at 9:15 am
Shweta, I am glad that I solved your problem, if you have other problems please post them.
July 18th, 2009 at 11:06 pm
Hey.. im having an issue with this script. I am running it on xampp and am unable to get it to display in IE7, IE8 or FF. I can see it fine and it works as its supposed to displaying the results properly. I cant even get it to display after creating the tables you have in the files by default. Any ideas? do i need to enable something? thanks
August 1st, 2009 at 1:21 pm
It’s working on IE6 or what?