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]
10 8053
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:
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?
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 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 :)
When in trouble, I have some sample code vailabe to accomplish what you want.
Ronald :cool:
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
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:
Thanks a lot you guys for taking your time with this. I will try both approaches.
It works. I was wasting my time without knowing about register_global concept. Thanks a million.
VJ
Sign in to post your reply or Sign up for a free account.
Similar topics |
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 click on the first menu and
select the desired item, then the proper select list is "loaded" into...
|
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? Bit tricky I
found. I could get the other orders but they all appeared when hovering over
the 1st...
|
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
appear.
If "German" is picked in the first menu, I want "English" to appear"
If Russian is picked...
|
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
|
by: cheng |
last post by:
can anyone give me java codes for dropdown menus for website.....
| |
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 scroll the page and then move the mouse over any menu item of the navbar, the dropdown menu is not...
|
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 down menu.
please advice
|
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 fill it with the subcategories from the chosen option in the first menu.
3, keep doing the above...
|
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 (el.style.background='url(arrow-down-title2.jpg)'){
|
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 usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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,...
|
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...
|
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 into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
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...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
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...
| |