Multiple Drop Down Menus W/ Submit Button

kvarnerexpress

Feb 15 2006, 11:06 PM

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...

Comment/Reply (w/o sign-up)

sportytalk

Feb 15 2006, 11:31 PM

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.

CODE

<?php
if(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!

Comment/Reply (w/o sign-up)

Tyssen

Feb 16 2006, 12:05 AM

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

Comment/Reply (w/o sign-up)

methane

Feb 20 2006, 03:28 AM

QUOTE(sportytalk @ Feb 16 2006, 07:31 AM)

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.

CODE

<?php
if(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.

Comment/Reply (w/o sign-up)

Inspiron

Feb 20 2006, 09:46 AM

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.

CODE

<html>
<head>
  <title> My Page </title>

  <script language="javascript">

   function checkSelected()
   {
      if (document.myForm.selection.value == "page1")
      {
         window.location = "http://www.microsoft.com/";
      }
      if (document.myForm.selection.value == "page2")
      {
         window.location = "http://www.google.com/";
      }

      if (document.myForm.selection.value == "page3")
      {
         window.location = "http://www.getfirefox.com/";
      }
   }

  </script>
</head>

<body>
<form name="myForm" onsubmit="">
  <select size="1" name="selection">
   <option value="page1"> Page 1  (www.microsoft.com) </option>
   <option value="page2"> Page 2  (www.google.com)</option>
   <option value="page3"> Page 3  (www.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..

Comment/Reply (w/o sign-up)

nelarozi

Feb 20 2006, 10:04 AM

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

Comment/Reply (w/o sign-up)

FeedBacker

Mar 18 2008, 12:54 PM

Replying to methane

I'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.

Comment/Reply (w/o sign-up)

iGuest-priyanka

Nov 3 2008, 12:43 PM

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

Comment/Reply (w/o sign-up)

(G)lew

Oct 7 2009, 09:51 PM

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

Comment/Reply (w/o sign-up)

(G)Tim

Oct 12 2009, 09:48 PM

javascript - 3 dropdown menus and submit
Multiple 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.

Comment/Reply (w/o sign-up)