Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Multiple Drop Down Menus W/ Submit Button
kvarnerexpress
post Feb 15 2006, 11:06 PM
Post #1


Super Member
*********

Group: Members
Posts: 407
Joined: 13-December 04
Member No.: 2,696
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...

(list)

Go to the top of the page
 
+Quote Post
sportytalk
post Feb 15 2006, 11:31 PM
Post #2


Super Member
*********

Group: Members
Posts: 326
Joined: 7-October 05
Member No.: 12,650
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! smile.gif

This post has been edited by sportytalk: Feb 15 2006, 11:39 PM

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Feb 16 2006, 12:05 AM
Post #3



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
Sportytalk's example could be improved further by using a switch/case statement instead of all the if elses.

(list)

Go to the top of the page
 
+Quote Post
methane
post Feb 20 2006, 03:28 AM
Post #4


Newbie
*

Group: Members
Posts: 5
Joined: 18-February 06
Member No.: 18,832
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! smile.gif


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.

(list)

Go to the top of the page
 
+Quote Post
Inspiron
post Feb 20 2006, 09:46 AM
Post #5


Trap Grand Marshal Member
***********

Group: Members
Posts: 1,205
Joined: 25-March 05
Member No.: 4,883
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.. wink.gif

(list)

Go to the top of the page
 
+Quote Post
nelarozi
post Feb 20 2006, 10:04 AM
Post #6


Newbie [Level 2]
**

Group: Members
Posts: 35
Joined: 18-February 06
Member No.: 18,833
use a program like 1 Cool Menu FX Tool! this program is payable but perfect for biginners wink.gif

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Mar 18 2008, 12:54 PM
Post #7


Trap Double Mocha Member
***************

Group: Members
Posts: 2,360
Joined: 21-September 07
Member No.: 50,369
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.

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML etc.. · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Enter Keypress Submits Wrong Button(2)
  2. Button To Print Current Web Page(13)
  3. Substitute Form Button For An Image(3)
  4. Radio Button(4)
  5. Dropdown Menus Links(3)
  6. Submit Button(3)
  7. Closing Multiple Windows(3)
  8. Refresh Page After Back Button Hit(11)
  9. Xhtml Strict Method For Submit/reset Buttons As An(1)
  10. Dynamic Button Size(1)
  11. About Submit Form Box(8)
  12. Question About Multiple Voting Post Or Get Methods(3)