two related dropdown menus

[goresus]

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]

[ronverdonk]

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:

[goresus]

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?

[ronverdonk]

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:

[goresus]

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 :)

[ronverdonk]

When in trouble, I have some sample code vailabe to accomplish what you want.

Ronald :cool:

[fariba123]

here is the sql command:
=============== ===

CREATE TABLE category ( cat_id int(2) NOT NULL auto_increment, category varchar(25) NOT NULL default '', PRIMARY KEY (cat_id) ) TYPE=MyISAM; 
# # Dumping data for table `category` # 
INSERT INTO category VALUES (1, 'Fruits'); INSERT INTO category VALUES (2, 'Colors'); INSERT INTO category VALUES (3, 'Games'); INSERT INTO category VALUES (4, 'Vehicles');
 # -------------------------------------------------------- # # Table structure for table `subcategory` # 
CREATE TABLE subcategory ( cat_id int(2) NOT NULL default '0', subcategory varchar(25) NOT NULL default '' ) TYPE=MyISAM; 
# # Dumping data for table `subcategory` # 
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'); 


here is the php code
===============


<html>

<head>
<title>Multiple drop down list box from plus2net</title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<SCRIPT language=JavaScript>
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value;
self.location='dd.php?cat=' + val ;
}

</script>
</head>

<body>
<?
include 'connect.php';
/*
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.
To read more on register_global visit.
  http://www.plus2net.com/php_tutorial/register-globals.php
*/
@$cat=$_GET['cat']; // Use this line or below line if register_global is off
//@$cat=$HTTP_GET_VARS['cat']; // Use this line or above line if register_global is off

///////// Getting the data from Mysql table for first list box//////////
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 
///////////// End of query for first list box////////////

/////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
if(isset($cat) and strlen($cat) > 0){
$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory where cat_id=$cat order by subcategory"); 
}else{$quer=mysql_query("SELECT DISTINCT subcategory FROM subcategory order by subcategory"); } 
////////// end of query for second subcategory drop down list box ///////////////////////////

echo "<form method=post name=f1 action='dd-check.php'>";
/// Add your form processing page address to action in above line. Example  action=dd-check.php////
//////////        Starting of first drop downlist /////////
echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
while($noticia2 = mysql_fetch_array($quer2)) { 
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."<BR>";}
else{echo  "<option value='$noticia2[cat_id]'>$noticia2[category]</option>";}
}
echo "</select>";
//////////////////  This will end the first drop down list ///////////

//////////        Starting of second drop downlist /////////
echo "<select name='subcat'><option value=''>Select one</option>";
while($noticia = mysql_fetch_array($quer)) { 
echo  "<option value='$noticia[subcategory]'>$noticia[subcategory]</option>";
}
echo "</select>";
//////////////////  This will end the second drop down list ///////////
//// Add your other form fields as needed here/////
echo "<input type=submit value=Submit>";
echo "</form>";
?>
<center><a href='http://www.plus2net.com'>PHP SQL HTML free tutorials and scripts</a></center> 
</body>

</html>

i hope this will solve your problem

i have tried it and it worked

[ronverdonk]

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:

[goresus]

Thanks a lot you guys for taking your time with this. I will try both approaches.

[vijcbe]

It works. I was wasting my time without knowing about register_global concept. Thanks a million.
VJ

[lizaa]

It works. I was wasting my time without knowing about register_global concept. Thanks a million.
VJ

Please can you tell me what you did exactly with register_global s..
I have the same problem as you and no solution till now
Thanks