473,573 Members | 3,239 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

two related dropdown menus

10 New Member
Hello there,

I am trying to create two dropdown menus in one of my forms so that they behave in the following way:

the first menu consists of "categories " of items, which I hard coded into the form. i am looking to relate the second menu with the first one such that, as soon as you choose an option from the first menu, the second menu lists only the name of those items that falls in the "category" chosen in the first menu.

I have a table set up with the data. The name of the table is items and the two fields are itemName and itemCategory.

Please help me out in sorting this problem. I have tried many things but the first thing that I am already unable to do is to make the first menu respond immediately without a need to press a button "automatic" .

the only bit of code that i have so far:
[html]
<tr>
<td width = "50" ><select name="category" >
<option value="1">appet izer </option>
<option value="2">meat and fish</option>
<option value="3">soup </option>
<option value="4">salad </option>
<option value="5">veget arian </option>
<option value="6">desse rt </option>
<option value="7">cold drinks </option>
<option value="8">hot drinks </option>
</select></td>


</tr>

<!--row 3-->
<tr>
<td width = "80" align = "right"> Item Name </td>
<td width = "50"><selec t name="items">
<option value="1">wings </option>
</select></td>
</tr>
[/html]
Nov 26 '06 #1
10 8034
ronverdonk
4,258 Recognized Expert Specialist
You can accomplish that using Ajax (HTML, JavaScript and server side prog like PHP, ASP).

As soon as the 1st item is selected, a JS routine is triggered that goes to the server db and invokes a program which gets the data from the db, echoes the results back via Ajax, JS picks it up and displays the select list.

Look at the Client Lookup sample in the Ajax samples site. Also the "Chained Select boxes" demo at that website shows the possibilities.

Ronald :cool:
Nov 27 '06 #2
goresus
10 New Member
You can accomplish that using Ajax (HTML, JavaScript and server side prog like PHP, ASP).

As soon as the 1st item is selected, a JS routine is triggered that goes to the server db and invokes a program which gets the data from the db, echoes the results back via Ajax, JS picks it up and displays the select list.

Look at the Client Lookup sample in the Ajax samples site. Also the "Chained Select boxes" demo at that website shows the possibilities.

Ronald :cool:


Thanks a lot ronald, will look into it too. But is there a way to just use html and php and sql to accomplish this? or do i definitely need to use java script or sth like that?
Nov 27 '06 #3
ronverdonk
4,258 Recognized Expert Specialist
Yes you could do it without, but it will be a lot of hassle to program.

First, without any JavaScript you cannot detect dynamically that a field is filled or clicked. You'll have to display the 1st select box en then do some sort of submit to send it to the server program.

Then you can, in the 2nd pass, read the POSTed value, get your data from the database and fill the form's 2nd dropdown (in the same script) and re-display it. Then another submit to post both dropdowns to the server and process.

So you have to program your HTML/PHP script so it can handle 2 passes:

pass1: fill 1st select box, click submit and build 2nd select box
pass2: fill 2nd select box, click submit and process request.

Using JS is a lot easier, because (a) you can immediately act on, e.g. using onchange, click of a selected dropdown field and (b) you can go asynchronously to the server, get the 2nd dropdown box values and fill the form. And all without submitting the form.

Does this explanation make any sense to you?

Ronald :cool:
Nov 27 '06 #4
goresus
10 New Member
Yes you could do it without, but it will be a lot of hassle to program.

First, without any JavaScript you cannot detect dynamically that a field is filled or clicked. You'll have to display the 1st select box en then do some sort of submit to send it to the server program.

Then you can, in the 2nd pass, read the POSTed value, get your data from the database and fill the form's 2nd dropdown (in the same script) and re-display it. Then another submit to post both dropdowns to the server and process.

So you have to program your HTML/PHP script so it can handle 2 passes:

pass1: fill 1st select box, click submit and build 2nd select box
pass2: fill 2nd select box, click submit and process request.

Using JS is a lot easier, because (a) you can immediately act on, e.g. using onchange, click of a selected dropdown field and (b) you can go asynchronously to the server, get the 2nd dropdown box values and fill the form. And all without submitting the form.

Does this explanation make any sense to you?

Ronald :cool:
yes it does make a lot of sense. thanks ronald. I will give javascript a try! if not i will be back :)
Nov 27 '06 #5
ronverdonk
4,258 Recognized Expert Specialist
When in trouble, I have some sample code vailabe to accomplish what you want.

Ronald :cool:
Nov 27 '06 #6
fariba123
17 New Member
here is the sql command:
=============== ===
Expand|Select|Wrap|Line Numbers
  1. CREATE TABLE category ( cat_id int(2) NOT NULL auto_increment, category varchar(25) NOT NULL default '', PRIMARY KEY (cat_id) ) TYPE=MyISAM; 
  2. # # Dumping data for table `category` # 
  3. INSERT INTO category VALUES (1, 'Fruits'); INSERT INTO category VALUES (2, 'Colors'); INSERT INTO category VALUES (3, 'Games'); INSERT INTO category VALUES (4, 'Vehicles');
  4.  # -------------------------------------------------------- # # Table structure for table `subcategory` # 
  5. CREATE TABLE subcategory ( cat_id int(2) NOT NULL default '0', subcategory varchar(25) NOT NULL default '' ) TYPE=MyISAM; 
  6. # # Dumping data for table `subcategory` # 
  7. INSERT INTO subcategory VALUES (1, 'Mango'); INSERT INTO subcategory VALUES (1, 'Banana'); INSERT INTO subcategory VALUES (1, 'Orange'); INSERT INTO subcategory VALUES (1, 'Apple'); INSERT INTO subcategory VALUES (2, 'Red'); INSERT INTO subcategory VALUES (2, 'Blue'); INSERT INTO subcategory VALUES (2, 'Green'); INSERT INTO subcategory VALUES (2, 'Yellow'); INSERT INTO subcategory VALUES (3, 'Cricket'); INSERT INTO subcategory VALUES (3, 'Football'); INSERT INTO subcategory VALUES (3, 'Baseball'); INSERT INTO subcategory VALUES (3, 'Tennis'); INSERT INTO subcategory VALUES (4, 'Cars'); INSERT INTO subcategory VALUES (4, 'Trucks'); INSERT INTO subcategory VALUES (4, 'Blkes'); INSERT INTO subcategory VALUES (4, 'Train'); 
  8.  
  9.  
  10. here is the php code
  11. ===============
  12.  
  13.  
  14. <html>
  15.  
  16. <head>
  17. <title>Multiple drop down list box from plus2net</title>
  18. <meta name="GENERATOR" content="Arachnophilia 4.0">
  19. <meta name="FORMATTER" content="Arachnophilia 4.0">
  20. <SCRIPT language=JavaScript>
  21. function reload(form)
  22. {
  23. var val=form.cat.options[form.cat.options.selectedIndex].value;
  24. self.location='dd.php?cat=' + val ;
  25. }
  26.  
  27. </script>
  28. </head>
  29.  
  30. <body>
  31. <?
  32. include 'connect.php';
  33. /*
  34. If register_global is off in your server then after reloading of the page to get the value of cat from query string we have to take special care.
  35. To read more on register_global visit.
  36.   http://www.plus2net.com/php_tutorial/register-globals.php
  37. */
  38. @$cat=$_GET['cat']; // Use this line or below line if register_global is off
  39. //@$cat=$HTTP_GET_VARS['cat']; // Use this line or above line if register_global is off
  40.  
  41. ///////// Getting the data from Mysql table for first list box//////////
  42. $quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 
  43. ///////////// End of query for first list box////////////
  44.  
  45. /////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
  46. if(isset($cat) and strlen($cat) > 0){
  47. $quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory"); 
  48. }else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); } 
  49. ////////// end of query for second subcategory drop down list box ///////////////////////////
  50.  
  51. echo "<form method=post name=f1 action='dd-check.php'>";
  52. /// Add your form processing page address to action in above line. Example  action=dd-check.php////
  53. //////////        Starting of first drop downlist /////////
  54. echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
  55. while($noticia2 = mysql_fetch_array($quer2)) { 
  56. if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";}
  57. else{echo  "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
  58. }
  59. echo "</select>";
  60. //////////////////  This will end the first drop down list ///////////
  61.  
  62. //////////        Starting of second drop downlist /////////
  63. echo "<select name='subcat'><option value=''>Select one</option>";
  64. while($noticia = mysql_fetch_array($quer)) { 
  65. echo  "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
  66. }
  67. echo "</select>";
  68. //////////////////  This will end the second drop down list ///////////
  69. //// Add your other form fields as needed here/////
  70. echo "<input type=submit value=Submit>";
  71. echo "</form>";
  72. ?>
  73. <center><a href='http://www.plus2net.com'>PHP SQL HTML free tutorials and scripts</a></center> 
  74. </body>
  75.  
  76. </html>
  77.  
i hope this will solve your problem

i have tried it and it worked
Dec 2 '06 #7
ronverdonk
4,258 Recognized Expert Specialist
fariba123: put your code within code, php or html tags. This is an unreadable bunch of lines that does not make it easy to read. See the Posting Guidelines on this!

Only problem with this solution is that you always get a page-reload after the click. And I was under the impression that you wanted it without reloading, hence the Ajax solution I proposed.

Ronald :cool:
Dec 2 '06 #8
goresus
10 New Member
Thanks a lot you guys for taking your time with this. I will try both approaches.
Dec 3 '06 #9
vijcbe
16 New Member
It works. I was wasting my time without knowing about register_global concept. Thanks a million.
VJ
Sep 30 '07 #10

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

Similar topics

1
2547
by: Andrea Bampi | last post by:
I'm just trying to do my first experiments with js, but I need some good examples to start with.. I need to design a dynamic form with two dropdown menus picking their select values from a db: my problem is, how can I make the selection in the first menu affect the value list in the second, without using any buttons? I mean, you just have to...
19
2850
by: chart43 | last post by:
I have question about the technique for css dropdown menus described in http://www.alistapart.com/articles/horizdropdowns/. Based on an html list, it has a few items in a 1st order list and further 2nd order lists that appear to the right when hovering over items in the 1st order. Anyone figured how to modify to go to n order greater than 2?...
32
2685
by: Continental Translations | last post by:
Can anybody help me? I am trying to create two drop down menus, where the results of the second one vary depending on what was selected in the first one. I am using MS Script Editor in MS Front Page to do this. In my first menu, I want "English" "German" and "Russian." Now if "English" is picked, I want "French" "German" and "Spanish" to...
4
1941
by: Ian Davies | last post by:
Hello I have two drop down menus in my php script. The items displayed in the second is dependent on which item is choosen from the first i.e. the choosen item from the first filters the items in the second first dropdown menu sub no sub 1 science >>>>>>>>> if this is selected 2 maths 3 something else
1
1503
by: cheng | last post by:
can anyone give me java codes for dropdown menus for website.....
4
2313
torquehero
by: torquehero | last post by:
Hi all :) I have created a horizontal navbar using Xara Menumaker. The Menu items have several dropdown menus. Its a javascript. When the mouse cursor is moved over any menu item, a dropdown list/menu appears. When the page is opened in the browser (as it appears by default), the dropdown menu positions are correctly displayed. But when I...
1
1190
by: runway27 | last post by:
when an option is choosen from a dropdown list using select tag and based on which option was selected How to create a new set of dropdown menu just beside the original dropdown list. Also from this new drop down that a user selects how can this value be passed to a php file in order to read which value was chosen from the newly creted drop...
1
2161
by: redgoals | last post by:
Hi, I have searched the forum for a similar problem but have been unable to find anything. What i am trying to achieve is a dropdown menu which behaves in the following way: 1, Someone selects an category from the first dropdown menu 2, if the category has subcategories then dynamically create a new dropdown underneath and in the process...
3
1190
by: angelinahmaleka | last post by:
Hi, I have just joined the forum and I need help with Javascrip dropdown menus. I have written a function which should change the background image of a button when it is clicked: function change(el) { if (el.style.background='url(arrow-up-title2.jpg)'){ el.style.background='url(arrow-down-title2.jpg)' } if...
0
7741
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
8026
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...
0
6347
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...
1
5550
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...
0
5252
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3692
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...
0
3686
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1256
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
984
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...

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.