473,666 Members | 2,121 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamic Drop Down Lists using PHP/MySQL/AJAX

1 New Member
Hi everyone,

I am trying to make three dynamic drop down lists. When I say dynamic I mean when I choose a value from the first one, the second one changes options and when I choose a value from the second one then the third one changes options. But at the end I want the to keep the selected values because I will submit them. For example the first list may be Country, the second one may be City and the third one Postal Code. So once I choose country I want the cities in that country to be visible and again once I choose city I want postal code to be visible, buy I do not want to loose my selections every time because I will submit them at the end. I was able to make it up to two drop down menus and it works perfect, but once I add the third everything is destroyed.
Take a look at my code for the first two menus and if you can help me I will really appreciate it

Expand|Select|Wrap|Line Numbers
  1. <!doctype html public "-//w3c//dtd html 3.2//en">
  2.  
  3. <html>
  4.     <head>
  5.         <title>Multiple drop down list box from plus2net</title>
  6.         <SCRIPT language=JavaScript>
  7.             function reload(form)
  8.             {
  9.             var val=form.cat.options[form.cat.options.selectedIndex].value;
  10.             self.location='dropmenutest.php?cat=' + val ;
  11.             }
  12.         </script>
  13.     </head>
  14.  
  15.     <body>
  16.         <?php
  17.             require_once("../../dbconnection.php");
  18.         ?>
  19.  
  20.         <?php
  21.             @$cat=$_GET['cat'];
  22.             if(strlen($cat) > 0 and is_numeric($cat))
  23.             { // to check if $cat is numeric data or not. 
  24.             echo "Data Error";
  25.             exit;
  26.             }
  27.  
  28. // Getting the data from Mysql table for first list box
  29.             $quer2=mysql_query("SELECT DISTINCT PARK FROM PARK");
  30.  
  31. // for second drop down list we will check if category is selected else we will display all the subcategory//
  32.             if(isset($cat) and strlen($cat) > 0){
  33.             $test="SELECT DISTINCT Room FROM Rooms where AREA = '";
  34.             $test = $test . $cat . "'";
  35.             $quer=mysql_query("$test"); 
  36.             }else{$quer=mysql_query("SELECT DISTINCT Room FROM Rooms"); } 
  37.  
  38.             echo "<form method=post name=f1 action='dd-check.php'>";
  39. // Add your form processing page address to action in above line. Example  action=dd-check.php
  40. // Starting of first drop downlist
  41.             echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
  42.             while($noticia2 = mysql_fetch_array($quer2)) { 
  43.             if($noticia2['PARK']==@$cat){echo "<option selected value='$noticia2[PARK]'>$noticia2[PARK]</option>"."<BR>";}
  44.             else{echo  "<option value='$noticia2[PARK]'>$noticia2[PARK]</option>";}
  45.             }
  46.             echo "</select>";
  47.  
  48. //Starting of second drop downlist
  49.             echo "<select name='subcat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
  50.             while($noticia = mysql_fetch_array($quer)) { 
  51.             echo  "<option value='$noticia[Room]'>$noticia[Room]</option>";
  52.             }
  53.             echo "</select>";
  54.  
  55. //Starting of the third drop downlist
  56.             echo "<select name='subcat'><option value=''>Select one</option>";
  57.             while($noticia = mysql_fetch_array($quer)) { 
  58.             echo  "<option value='$noticia[Room]'>$noticia[Room]</option>";
  59.             }
  60.             echo "</select>";
  61.  
  62.  
  63. //Add your other form fields as needed here
  64.             echo "<input type=submit value=Submit>";
  65.             echo "</form>";
  66.         ?>
  67.  
  68.         <?php
  69.             require("../../disconnect.php")
  70.         ?>    
  71.     </body>
  72. </html>
  73.  
Feb 24 '11 #1
4 6472
johny10151981
1,059 Top Contributor
If you dont understand AJAX

you can follow this example

In your source file you can simply create the SELECT drop down list. and in ajax reply you can add the return in the proper value as HTML.
Feb 25 '11 #2
dgreenhouse
250 Recognized Expert Contributor
You are not using Ajax in your code example.

If you want to use your existing code; which would be simpler than Ajax, you'll need to send the value(s) of all of the DropDown (Combobox) elements with each reload.

Expand|Select|Wrap|Line Numbers
  1. This:
  2. # var val=form.cat.options[form.cat.options.selectedIndex].value;
  3. #             self.location='dropmenutest.php?cat=' + val ;
  4.  
  5. Should change to something like this:
  6.  
  7. # populate vars
  8. val1=form.cat.options[form.cat.options.selectedIndex].value;
  9. val2=form.subcat1.options[form.subcat1.options.selectedIndex].value;
  10. val3=form.subcat2.options[form.subcat2.options.selectedIndex].value;
  11.  
  12. self.location='dropmenutest.php?cat=' + val1 + '&subcat1=' + val2 + '&subcat2=' + val3 ;
  13.  
  14.  
Then your PHP code should test for the existence and validity of all of the arguments and variably perform the sql queries.

i.e.
1- if cat1 is invalid; reset all dropdowns
2- if cat1 is valid and subcat1 and subcat2 are both invalid; keep the value of cat1, perform sql on cat1, and populate subcat1, subcat2's value is reset
3- if cat1 is valid and subcat1 is valid; keep the values of cat1 and subcat1, perform sql on subcat1, and populate subcat2
4- if cat1, subcat1, and subcat2 are valid; complete whatever logic is appropriate.
Feb 26 '11 #3
candy89
1 New Member
You can simply do this by using jquery .ajax(). Just send the first drop-down value with onChange() function and fetch the data from db and display the response. You can find a well explained example here:

http://www.x-developer.com/php-scrip...shing-the-page
Apr 9 '12 #4
Bharat383
93 New Member
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.                 var http = false;
  5.                 if(navigator.appName == "Microsoft Internet Explorer")
  6.                 {
  7.                     http = new ActivexObject("Microsoft.XMLHTTP");
  8.                 }
  9.                 else
  10.                 {
  11.                     http = new XMLHttpRequest();
  12.                 }
  13.  
  14.                 function get_city(str)
  15.                 {
  16.                         if(str == "India")
  17.                         {
  18.                                 var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='Mumbai'>Mumbai</option><option value='Delhi'>Delhi</option><option value='Kolkata'>Kolkata</option></select>";
  19.                         }
  20.                         if(str == "Japan")
  21.                         {    
  22.                             var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='japan_city1'>Japan City 1</option><option value='japan_city2'>Japan City 2</option><option value='japan_city3'>Japan City 3</option></select>";
  23.                         }
  24.                         if(str == "USA")
  25.                         {    
  26.                             var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='usa_city1'>usa City 1</option><option value='usa_city2'>usa City 2</option><option value='usa_city3'>USA City 3</option></select>";
  27.                         }                        
  28.                         document.getElementById("city_area").innerHTML=city_list;
  29.                 }
  30.  
  31.                 function get_zipcode(str1)
  32.                 {
  33.  
  34.                         /* India city selection */
  35.                         if(str1 == "Mumbai")
  36.                         {
  37.                                 var zipcode_list = "<select name='zipcode' ><option value='123456'>123456</option><option value='123123'>123123</option><option value='978871'>978871</option></select>";
  38.                         }
  39.                         if(str1 == "Delhi")
  40.                         {    
  41.                                 var zipcode_list = "<select name='zipcode' ><option value='000001'>000001</option><option value='000002'>000002</option><option value='00003'>00003</option></select>";
  42.                         }
  43.                         if(str1 == "Kolkata")
  44.                         {    
  45.                                 var zipcode_list = "<select name='zipcode' ><option value='000004'>000004</option><option value='000005'>000005</option><option value='00006'>00006</option></select>";
  46.                         }                        
  47.  
  48.                         /* Japan city selection */
  49.                         if(str1 == "japan_city1")
  50.                         {
  51.                                 var zipcode_list = "<select name='zipcode' ><option value='japanCode 1'>japanCode 1</option><option value='japanCode 2'>japanCode 2</option><option value='japanCode 3'>japanCode 3</option></select>";
  52.                         }
  53.                         if(str1 == "japan_city2")
  54.                         {    
  55.                                 var zipcode_list = "<select name='zipcode' ><option value='9454545'>japan city code 2</option></select>";
  56.                         }
  57.                         if(str1 == "japan_city3")
  58.                         {    
  59.                                 var zipcode_list = "<select name='zipcode' ><option value='99999'>99999</option><option value='88888'>888888</option><option value='666666'>666666</option></select>";
  60.                         }                        
  61.  
  62.                         /* USA city selection */
  63.                         if(str1 == "usa_city1")
  64.                         {
  65.                                 var zipcode_list = "<select name='zipcode' ><option value='11111'>11111</option><option value='j222222'>222222</option><option value='333333'>333333</option></select>";
  66.                         }
  67.                         if(str1 == "usa_city2")
  68.                         {    
  69.                                 var zipcode_list = "<select name='zipcode' ><option value='13212121'>j1321321312</option></select>";
  70.                         }
  71.                         if(str1 == "usa_city3")
  72.                         {    
  73.                                 var zipcode_list = "<select name='zipcode' ><option value='54545454'>454545</option><option value='21212121'>132132132</option><option value='854545'>8545421</option></select>";
  74.                         }                                                
  75.  
  76.                         document.getElementById("zipcode_area").innerHTML=zipcode_list;
  77.                 }
  78.  
  79.         </script>
  80.     </head>
  81.         <body>
  82.         <div id="m1"></div>
  83.                     <form name="form1" method="post" >
  84.                             <table>
  85.                                     <tr>
  86.                                             <th>Country</th>
  87.                                             <td>
  88.                                                     <select name="country" id="country" onChange="get_city(this.value)">
  89.                                                         <option value="0">Select Country</option>
  90.                                                         <option value="India">India</option>
  91.                                                         <option value="Japan">Japan</option>
  92.                                                         <option value="USA">USA</option>
  93.                                                     </select>
  94.                                             </td>
  95.                                     </tr>
  96.                                     <tr>
  97.                                             <th>City</th>
  98.                                             <td>
  99.                                                     <div id="city_area">                                                                                                    
  100.                                                         <select name="city" id="city">
  101.                                                                 <option value="0">Select City</option>
  102.                                                         </select>
  103.                                                     </div>
  104.                                             </td>
  105.  
  106.                                     </tr>
  107.                                     <tr>
  108.                                             <th>Zipcode</th>
  109.                                             <td>
  110.                                                 <div id="zipcode_area">                                                                                                
  111.                                                     <select name="zip_code" id="zip_code">
  112.                                                             <option value="0">Select Zip Code</option>
  113.                                                     </select>
  114.                                                 </div>
  115.                                             </td>
  116.                                     </tr>                                    
  117.                             </table>
  118.                     </form>
  119.         </body>
  120. </html>
  121.  

===> it is only static as you can get ideas .... how to work it.....
if you wanna change the values from database then make it with php and mysql

Bharat Parmar(Bharat38 3)
Apr 14 '12 #5

Sign in to post your reply or Sign up for a free account.

Similar topics

3
2048
by: pmud | last post by:
Hi, I have 2 drop down lists on an asp.Net page. The 1st contains alphabets. When the user selects an alphabet frm the first list, the second drop down list should be populated with names from the sql database, which begin with that alphabet. For this I used an sql data Adapter & created a data set. The user's selection in 1st list is passed as parameter to the sql statement.
19
258987
by: mart2006 | last post by:
I've created a dynamic drop down menu that populates itself with data from a MySQL table. What I would like to do is create a non dynamic drop down menu that alters what is shown in the dynamic menu. For example, the first menu has three cities London, Paris, New York. If I choose London it populates the second menu with people from London. Here is the code I have for my dynamic menu <td valign=top><strong>Name:</strong></td> <td>...
4
1389
by: Prof | last post by:
Hi, I have the requirement of autoupdating the drop down lists , when a selectin is done in another drop down box. I dont have a server through which i can make it dynamic. I have to hard code it in the html. Can someone suggest anything. Prof
3
7345
by: penny111 | last post by:
Hi there, For my application, i need to have 3 drop down lists 1. drop down list of folder names 2. drop down list of documents in the folder selected 3. drop down list of instances of the document selected (my application uses the BusinessObjects Java Web Services SDK) The 2nd list is dependent on the 1st, while the 3rd list is dependent on the 2nd. In other words, this is what i want my application to do -select a folder from the...
1
10798
by: icepoint | last post by:
Hey everyone, Can anyone tell me how to make dynamice drop down lists for country and states? I have the models for country and states build and have the country drop down list worked, so how can I make the state list changes corressponding to the change of the country list? etc. Canada -> only canada provinces... Thanks
2
2312
by: rpeterson84 | last post by:
Hello: I was hoping to gain some insight, a point in the right direction if you will... We use an .asp web page to select from a couple of dynamic drop down menus then enter a number, and press go to query the sql db. Is it possible to use a javascript to open the web page, and the select the options I want from a dynamic dropdown menus? Also selecting the option I want from the available checkboxes, then "clicking" go.
3
2543
by: amcoldspy | last post by:
Hi, am trying to create dynamic drop down boxes.. there are 3 drop down boxes. The second drop down box elements are to be update based on the selection made in the first drop down box (selecting an element on the first drop down box calls a getData.jsp file which returns the result.) the third drop down box elements are to be update based on the selection made in the second drop down box (selecting an element on the second drop down...
10
57032
by: mart2006 | last post by:
Hi, I'm fairly new to PHP and I've created a dynamic drop down menu that populates itself with data from a MySQL table. What I would like to do is create a non dynamic drop down menu that alters what is shown in the dynamic menu. For example, the first menu has three cities London, Paris, New York. If I choose London it populates the second menu with people from London. Here is the code I have for my dynamic menu <td...
5
3027
by: Bar2aYunie | last post by:
Hello, I just found this great forum and I'm really looking for some help! I've been trying to create a dynamic drop down select list script with descriptions. And I have been working on this script for three months already....but now I'm totally stuck!! Lemme explain what I need first. I have 19 products that each have it's own details: size, colors, materials and fnish. Therefore I need 5 select lists. The first one will list all of...
0
8360
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
8556
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8642
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7387
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6198
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4198
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4371
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2011
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1777
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.