Multiple Drop Down Menus W/ Submit Button

I am building a page that will have 2 drop down menus and a submit button. The first menu will have one set of options, say colors (red, blue, green, yellow). The second menu will have another set of options, say sizes (small, medium, large). What I want to be able do is select a color and a size, click submit and have it go to the page for those options. So if a user picks 'Red' and 'Small' and clicks submit they will be linked to page1.html. If they pick 'Blue' and 'Large', they will be linked to page2.html, and so on.Any ideas how to do this? Will I need to use javascript?PS: This page is not using a database. Thanks in advance...

Hmmmm, the best way to do this would be to combine php with some aspects of html, which is still possible without the need of connecting to a database and whatnot.

The following code is an example of how it could be done.

<?phpif(isset($_POST['post'])) {if (($_POST['color'] == 'red') AND ($_POST['size'] == 'small')) {header("Location: page1.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'small')) {header("Location: page2.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'small')) {header("Location: page3.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'small')) {header("Location: page4.html"); }elseif (($_POST['color'] == 'red') AND ($_POST['size'] == 'medium')) {header("Location: page5.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'medium')) {header("Location: page6.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'medium')) {header("Location: page7.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'medium')) {header("Location: page8.html"); }elseif (($_POST['color'] == 'red') AND ($_POST['size'] == 'large')) {header("Location: page9.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'large')) {header("Location: page10.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'large')) {header("Location: page11.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'large')) {header("Location: page12.html"); }else { die("Error"); }exit;}?><form method='post' action='yourfile.php'><select name="color" size="1"><option>red</option><option>blue</option><option>green</option><option>yellow</option></select><br><select name="size" size="1"><option>small</option><option>medium</option><option>large</option></select><br><input type='submit' name='post' value='Press here to view the relevant page'></form>

The isset function is used to work out whether or not the form (html down the bottom) has had its submit button pressed.

After the isset, I've added some elseif statements. These specify the output pages for the various outcomes, the else statement is just an addition to produce errors if some mistake happens, which shouldn't.

The html at the end of the php, is the simple drop down box code, the name tag is the name which the php post variable uses on the if/else statements.

Hope this helps. There shouldn't be any problems with this coding here, as I typed onto the reply box, as opposed to my php IDE with syntax colouring! However, the testing was ok here.
If for any reason, there are bugs or problems, please don't hesitate to reply or contact me!
Edited February 15, 2006 by sportytalk (see edit history)

Sportytalk's example could be improved further by using a switch/case statement instead of all the if elses.

Hmmmm, the best way to do this would be to combine php with some aspects of html, which is still possible without the need of connecting to a database and whatnot.
The following code is an example of how it could be done.

<?phpif(isset($_POST['post'])) {if (($_POST['color'] == 'red') AND ($_POST['size'] == 'small')) {header("Location: page1.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'small')) {header("Location: page2.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'small')) {header("Location: page3.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'small')) {header("Location: page4.html"); }elseif (($_POST['color'] == 'red') AND ($_POST['size'] == 'medium')) {header("Location: page5.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'medium')) {header("Location: page6.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'medium')) {header("Location: page7.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'medium')) {header("Location: page8.html"); }elseif (($_POST['color'] == 'red') AND ($_POST['size'] == 'large')) {header("Location: page9.html"); }elseif (($_POST['color'] == 'blue') AND ($_POST['size'] == 'large')) {header("Location: page10.html"); }elseif (($_POST['color'] == 'green') AND ($_POST['size'] == 'large')) {header("Location: page11.html"); }elseif (($_POST['color'] == 'yellow') AND ($_POST['size'] == 'large')) {header("Location: page12.html"); }else { die("Error"); }exit;}?><form method='post' action='yourfile.php'><select name="color" size="1"><option>red</option><option>blue</option><option>green</option><option>yellow</option></select><br><select name="size" size="1"><option>small</option><option>medium</option><option>large</option></select><br><input type='submit' name='post' value='Press here to view the relevant page'></form>

The isset function is used to work out whether or not the form (html down the bottom) has had its submit button pressed.

After the isset, I've added some elseif statements. These specify the output pages for the various outcomes, the else statement is just an addition to produce errors if some mistake happens, which shouldn't.

The html at the end of the php, is the simple drop down box code, the name tag is the name which the php post variable uses on the if/else statements.

Hope this helps. There shouldn't be any problems with this coding here, as I typed onto the reply box, as opposed to my php IDE with syntax colouring! However, the testing was ok here.
If for any reason, there are bugs or problems, please don't hesitate to reply or contact me!

Actually, javascript can do you need. You should write a function called by on submit form. In the javascript function you can use switch cases to check the inputs and then redirect the page to what you need it to go.

It can be done with just javascript. I've typed this HTML file and javascript on my own on notepad and tested it. It's working. Just change the variables in the selection tags <select> to suit your desire. Add another <select> tag to make a second dropdown menu.

 

This code is an entire HTML file. Simply copy the all its contents and paste it in notepad and save as a HTML file.

<html> <head>  <title> My Page </title>    <script language="javascript">     function checkSelected()   {	  if (document.myForm.selection.value == "page1")	  {		 window.location = "http://forums.xisto.com/no_longer_exists/;;	  }	  if (document.myForm.selection.value == "page2")	  {		 window.location = "https://www.google.com/&%2334;;	  }	  if (document.myForm.selection.value == "page3")	  {		 window.location = "https://www.mozilla.org/en-US/firefox/new/?utm_source=getfirefox-com&utm_medium=referral;;	  }   }    </script> </head><body> <form name="myForm" onsubmit="">  <select size="1" name="selection">   <option value="page1"> Page 1  ( microsoft.com  </option>   <option value="page2"> Page 2  (https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl;   <option value="page3"> Page 3  ( getFireFox.com ) </option>  </select>  <input type="button" name="submit" value="Go !" onclick="checkSelected();"> </form></body></html>

Phew.. Took me 15 minutes to figure out this... Pretty simple logic..

use a program like 1 Cool Menu FX Tool! this program is payable but perfect for biginners

Replying to methaneI'd go with the PHP and not the javascript, simply because if someone has javascript disabled on their browser (as many people do these days, thanks to your friendly neighbourhood spyware authors), it'll fail miserably.

regarding the validation of the drop down box

Multiple Drop Down Menus W/ Submit Button

 

I m trying to validate a form having fields such as user id, password,retype pass word, security question, answer and few more general fields like name,add etc.My query is when I click on submit button, eventhough if I have not selected my security question from the drop down listbox the user can type his answer and the page accepts the answer and gets submitted.Therefore I need the exact function that wont submit the form untill the question is selected and will give text msg beside the question field that "select your question" and not the alert box.I m using Javascript for this.Kindly advise me and thanks in advance.

 

-question by priyanka

Replying to sportytalk I'm trying to use your code for a multiple drop down menu with a submit button exactly like this example. I'm using Dreamweaver and I'm not sure about the action='yourfile.Php' part of the code. I don't have a .Php file so I'm not sure what the action should=

Reply by Anon

javascript - 3 dropdown menus and submitMultiple Drop Down Menus W/ Submit Button

Do you have an example of what the javascript code would look like for 3 drop down menus and a submit button?  Say menu one lists colors green and blue, menu two lists sizes large and small and menu three lists types cotton and polyester. The user would be taken to a particular web page based on their three selections. 

 

Cannot modify header information Multiple Drop Down Menus W/ Submit Button

sportytalk,

I copied your code into Dreamweaver CS4, saved the file as "yourfile.Php", then uploaded it to my server.  When I visit the page in a web browser (IE8 or Firefox) and hit the SUBMIT button, I get an error that reads:

Warning: Cannot modify header information - headers already sent by (output started at /home/content/x/y/z/xyz/html/yourfile.Php:8) in /home/content/x/y/z/xyz/html/yourfile.Php on line 15 

Doing some research, I've seen others claim that there might be whitespace before or after the

<?php . . . ?>, but I can't find any blanks.

multiple dropdown boxesMultiple Drop Down Menus W/ Submit Button

I just want to create a webpage, that it appears only a single dropdown box with multiple options in that box, when we selected item1, an another dropdown box has to appear, which will contain some more subitems, if we selected subitem1 here one more drop down box has to appear here, like this and if there is no subitem to that specified item, I want to just open a link on new window, while doing this the parent dropdownbox will still remain, it should not be disappear

 

Please any one Help me To Create This Code, I tried so much but I am not getting any I don't know any programming so please help for this, please send me some mail if any one got the solution

-reply by help

<script>
function show(){
var ty= window.document.getElementById('type');
var ri= window.document.getElementById('risk');
var ho= window.document.getElementById('holding');
var ca= window.document.getElementById('capital');

var tysel= ty.options[ty.selectedIndex].value;
var risel= ri.options[ri.selectedIndex].value;
var hosel= ho.options[ho.selectedIndex].value;
var casel= ca.options[ca.selectedIndex].value;

if(tysel=="Investor" && risel=="Low" && hosel=="G36" && casel=="B25"){
document.getElementById('text').style.visibility = 'visible';
alert("Hello! I am an alert box!");
}
else{
document.getElementById('text').style.visibility = 'hidden';
}
}
</script>

<form id="form1" name="form1" method="post" action="">
<label class="llabel">Type</label> : <select name="type" class="forms" id="type">
<option value="Investor">Investor</option>
<option value="Trader">Trader</option>
<option value="Both">Both</option>
<option value="None">None</option></select>
<br>
<label class="llabel">Age</label> : <select name="age" class="forms" id="age">
<option value="25">Below 25 years</option>
<option value="2540">Between 25-40 Years</option>
<option value="4055">Between 40-55 Years</option>
<option value="55">Above 55 Years</option>
</select><br>
<label class="llabel">Profession</label> : <select name="prof" class="forms" id="prof">
<option value="Self">Self Employed</option>
<option value="Job">Job</option>
<option value="Business">Business</option>
<option value="Investorpro">Investor</option>
</select>
<br>
<label class="llabel">Risk Profile</label> : <select name="risk" class="forms" id="risk">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
<option value="VHigh">Very High</option>
</select>
<br>
<label class="llabel">Knowledge</label> : <select name="select" class="forms">
<option value="Novice">Novice</option>
<option value="Basic">Basic Understanding</option>
<option value="Good">Good Understanding</option>
<option value="Specialist">Specialist</option>
</select>
<br>
<label class="llabel">Risk Capital</label> : <select name="capital" class="forms" id="capital">
<option value="B2">Below 2 Lacs</option>
<option value="B25">Between 2-5 Lacs</option>
<option value="B510">Between 5-10 Lacs</option>
<option value="G10">Greater than 10 Lacs</option>
</select>
<br>
<label class="llabel">Holding Period</label> : <select name="holding" class="forms" id="holding">
<option value="B12">Between 1-2 months</option>
<option value="B612">Between 6-12 months</option>
<option value="B1236">Between 12-36 months</option>
<option value="G36">Greater than 36 months</option>
</select>
<br>
<label class="llabel">Expected Returns</label> : <select name="select" class="forms">
<option value="35">35% per year</option>
<option value="55">55% per year</option>
<option value="75">75% per year</option>
<option value="100">100% per year</option>
</select>
<br><br>
<div align="center">
<input type="button" value="Submit" name="Submit" onclick="return show();">  
<input type="button" value="Reset" name="Reset">  
<input type="text" id="text" style="visibility:hidden">
</div>
</form>

[/code]
Just copy the code and enjoy,

Regards

Surya R Praveen
Senior Web Developer

<code><script>/* Multiple Drop Down Surya R Praveen */function show(){var ty= window.document.getElementById('type');var ri= window.document.getElementById('risk');var ho= window.document.getElementById('holding');var ca= window.document.getElementById('capital');var ag= window.document.getElementById('age');var tysel= ty.options[ty.selectedIndex].value;var risel= ri.options[ri.selectedIndex].value;var hosel= ho.options[ho.selectedIndex].value;var casel= ca.options[ca.selectedIndex].value;var agsel= ag.options[ag.selectedIndex].value;if(tysel=="Investor" && risel=="Low" && hosel=="G36" && casel=="B25"){window.location = "http://suryarpraveen.wordpress.com/contact/";}else if(tysel=="Investor" && risel=="Low" && agsel=="2540" && casel=="B25"){window.location = "http://suryarpraveen.wordpress.com/category/computing/";}else if(tysel=="Investor" && risel=="Medium" && agsel=="2540" && casel=="B25"){window.location = "http://suryarpraveen.wordpress.com/category/electronics/";}else if(tysel=="Investor" && risel=="High" && agsel=="2540" && casel=="B25"){window.location = "http://suryarpraveen.wordpress.com/category/gaming/";}else if(tysel=="Investor" && risel=="VHigh" && agsel=="2540" && casel=="B25"){window.location = "http://suryarpraveen.wordpress.com/category/internet/";}else if(tysel=="Trader"){window.location = "http://suryarpraveen.wordpress.com/category/mobile/";}}</script><form id="form1" name="form1" method="post" action="">  <label class="llabel">Type</label> : <select name="type" class="forms" id="type"><option value="Investor">Investor</option><option value="Trader">Trader</option><option value="Both">Both</option><option value="None">None</option></select><br>  <label class="llabel">Age</label> : <select name="age" class="forms" id="age"><option value="25">Below 25 years</option><option value="2540">Between 25-40 Years</option><option value="4055">Between 40-55 Years</option><option value="55">Above 55 Years</option></select><br><label class="llabel">Profession</label> : <select name="prof" class="forms" id="prof"><option value="Self">Self Employed</option><option value="Job">Job</option><option value="Business">Business</option><option value="Investorpro">Investor</option></select><br><label class="llabel">Risk Profile</label> : <select name="risk" class="forms" id="risk"><option value="Low">Low</option><option value="Medium">Medium</option><option value="High">High</option><option value="VHigh">Very High</option></select><br><label class="llabel">Knowledge</label> : <select name="select" class="forms"><option value="Novice">Novice</option><option value="Basic">Basic Understanding</option><option value="Good">Good Understanding</option><option value="Specialist">Specialist</option></select><br><label class="llabel">Risk Capital</label> : <select name="capital" class="forms" id="capital"><option value="B2">Below 2 Lacs</option><option value="B25">Between 2-5 Lacs</option><option value="B510">Between 5-10 Lacs</option><option value="G10">Greater than 10 Lacs</option></select><br><label class="llabel">Holding Period</label> : <select name="holding" class="forms" id="holding"><option value="B12">Between 1-2 months</option><option value="B612">Between 6-12 months</option><option value="B1236">Between 12-36 months</option><option value="G36">Greater than 36 months</option></select><br><label class="llabel">Expected Returns</label> : <select name="select" class="forms"><option value="35">35% per year</option><option value="55">55% per year</option><option value="75">75% per year</option><option value="100">100% per year</option></select><br><br><div align="center"><input type="button" value="Submit" name="Submit" onclick="return show();">  	<input type="button" value="Reset" name="Reset">  <input type="text" id="text" style="visibility:hidden"></div></form></code>