1. Home
  2. Forums Index
  3. Server Side / PHP Server Side Scripting 2:06 am Apr 28, 2026

Forum Moderators: coopster

Message Too Old, No Replies

Drop-down list with links

         

Spyce

2:00 am on Feb 16, 2012 (gmt 0)

10+ Year Member



I am currently working on a project for a client, and they have requested that on their product page, they would like a drop-down menu where visitors can choose a product and after hitting the "Go" button, they are taken to that product's specific page. I have the drop-down box all set up, but the thing is, the website is set up using PHP includes, and when I enter a destination address in the <option value="URLHERE"></option> (I put the address where it says URLHERE), the page will not open. It just brings me back to index.php. It doesn't matter if I enter the full http:// or if just use index.php?page=WHATEVER.

This is my index: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Green Harbor Bait</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel=stylesheet href="style.css" type="text/css" media=screen>
<!--[if IE ]>
 <link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({ overlayOpacity: 0.8 });
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--> <!-- </style>') } -->

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>
<script language="JavaScript">
<!--
function JumpToIt(frm) {
  var newPage = frm.url.options[frm.url.selectedIndex].value
  if (newPage != "None") {
    location.href=newPage
  }
}
//-->
</script>
</head>

<body>
<div id="header">
<div id="navwrap">
<table id="nav">
<tr>
<td class="nav-link"><a href="index.php">Home</a></td>
<td class="nav-link"><a href="index.php?page=products">Products</a></td>
<td class="nav-link"><a href="index.php?page=charters">Charters</a></td>
<td class="nav-link"><a href="index.php?page=gallery">Photo Gallery</a></td>
<td class="nav-link"><a href="index.php?page=directions">Directions</a></td>
<td class="nav-link"><a href="index.php?page=contact">Contact Us</a></td>
</tr>
</table>
</div> <!-- END #NAVWRAP -->
</div> <!-- END #HEADER -->
<div id="bodywrap">
<div id="body-content">


... and this is my product.php page with the drop-down: 

<center>
<form>
<select name="url" style="width: 250px; height: 27px; font-size: 18px; font-family: Arial;">
<option value="index.php?page=reels">Reels</option>
<option value="index.php?page=rods">Rods</option>
<option value="index.php?page=lures">Lures</option>
<option value="index.php?page=tackle-line">Terminal Tackle & Line</option>
<option value="index.php?page=tools">Knives & Tools</option>
<option value="index.php?page=bait">Bait</option>
</select>
<input type="submit" style="font-family: Arial;" value="Go!" onClick="JumpToIt(this.form)">
</form>
</center>


Any ideas why this is bringing me back to index.php instead of the product's page?

mvaz

1:46 pm on Feb 16, 2012 (gmt 0)

10+ Year Member



I believe it is because you are calling the index.php in your options value. You could do it this way, for eg,

option value="product.php?page=reels">Reels</option>

and in product.php you need to code what you want to see based on the variable you received from the previous page.

Hope this makes sense.

rocknbil

5:18 pm on Feb 16, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try to isolate the problem to it's least common denominator, your code dump has a lot of superflous code. This will help you understand what's going on, and help others . . . to help you. :-)

As mentioned when you hit "go" there's no action defined in your form, which will always post via the method get to "whatever page this is" (also, as mentioned, is index.php your true page processor? Is it supposed to accept GET or POST?) Second, you almost have the working script here,

function JumpToIt(frm) {

but the problem is 1) your event is attached to the button (you want it on submit,), and 2) even if you did that, you're not returning false from your function. Returning false is what stops the form from submitting.

A rewrite that should work. I've also removed the inline junk so on call of "window.onload" it attaches the behavior to your form, and provides better feedback to the user if nothing is selected with an alert: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <title>Green Harbor Bait</title> 
 <!-- note no /, you're using an HTML 4 doctype --> 
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen"> 
 <!--[if IE ]> 
 <link href="ie.css" rel="stylesheet" type="text/css"> 
 <![endif]--> 
 <style type="text/css"> 
 /* for example, add to your style sheet above */ 
 #url { width: 250px; height: 27px; font-size: 18px; font-family: Arial; } 
 #submitButton { font-family: arial; } 
 </style> 
 <script type="text/javascript"> 
 window.onload=function() { 
 var obj = document.getElementById('my-form'); 
 // Always check for it first - squeches JS errors 
 if (obj) { 
 obj.onsubmit=function() { return JumpToIt(this); }; 
 } 
 } 
 // 
 function JumpToIt(frm) { 
 var ind = frm.url.selectedIndex; 
 if (ind==0) { alert('Please select a URL.'); } 
 else { 
 document.location = frm.url.options[ind].value; 
 } 
 return false; 
 } 
</script> 
</head> 
<body> 
<!-- note the ID, always access unique elements by id for client side scripting --> 
<form id="my-form" action="capture-submit.php" method="get"> 
 <select name="url" id="url"> 
 <!-- always lwave first selection blank. This allows you to 
 error trap and doesn't allow users to just submit without thinking --> 
 <option value="">Select URL</option> 
 <option value="index.php?page=reels">Reels</option> 
 <option value="index.php?page=rods">Rods</option> 
 <option value="index.php?page=lures">Lures</option> 
 <option value="index.php?page=tackle-line">Terminal Tackle &amp; Line</option> 
 <option value="index.php?page=tools">Knives &amp; Tools</option> 
 <option value="index.php?page=bait">Bait</option> 
 </select> 
 <input type="submit" id="submitButton" value="Go!"> 
</form> 
</body> 
</html>

Some notes:

Returning false: Return false in javascript stops any event element from performing it's "natural" action. By putting the event on the form submit, and returning false on that event, Javascript takes over and it doesn't submit the form (the opposite of what's happening now.) The same is true of anchors (links.) Often you'll see

<a href="#" onclick="document.location='go.html'">Go</a>

Which ALSO fails with JS disabled. The better way,
<a href="go.html" onclick="document.location='go.html'; return false">Go</a>

This also prevents # from navigating to the top of the page.

What is "capture-submit.php?" Javascript should always, always, always be used as progressive enhancement. If JS is disabled, this will still fail. So what capture-submit.php does is the same thing that's done with your Javascript: 

<?php 
// ALWAYS filter input. This does it by throwing away anything but the values in your array: 
$valid = array('reels','rods','lures','tackle-line','tools','bait'); 
if (isset($_GET['page']) and in_array($GET['page'],$valid)) { 
header("Location:index.php?page=".$_GET['page']); 
} 
else { 
echo '<p>Please select an item from the list below.</p> 
<form id="my-form" action="capture-submit.php" method="get"> 
 <select name="url" id="url"> 
 <option value="">Select URL</option> 
 <option value="index.php?page=reels">Reels</option> 
 <option value="index.php?page=rods">Rods</option> 
 <option value="index.php?page=lures">Lures</option> 
 <option value="index.php?page=tackle-line">Terminal Tackle &amp; Line</option> 
 <option value="index.php?page=tools">Knives &amp; Tools</option> 
 <option value="index.php?page=bait">Bait</option> 
 </select> 
 <input type="submit" id="submitButton" value="Go!"> 
</form> 
'; 
} 
?>


You would probably wouldn't need the Javascript (they wouldn't be here if JS was enabled), but you would want to output a full page in the "else".

The Go button isn't really needed (but you want to leave it there in case JS is disabled.) Normally jump menus are attached to the onchange function of the select. One way you could handle that is to hide the button if JS is enabled. In this case, you can now attach the event to the select and don't need to attach it to the form: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
 <title>Green Harbor Bait</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen"> 
 <!--[if IE ]> 
 <link href="ie.css" rel="stylesheet" type="text/css"> 
 <![endif]--> 
 <style type="text/css"> 
 #url { width: 250px; height: 27px; font-size: 18px; font-family: Arial; } 
 #submitButton { font-family: arial; } 
 </style> 
 <script type="text/javascript"> 
 window.onload=function() { 
 var obj = document.getElementById('url'); // See difference? 
 if (obj) { 
 obj.onchange=function() { return JumpToIt(this); }; 
 document.getElementById('submitButton').style.display='none'; 
 } 
 } 
 // 
 function JumpToIt(selectObject) { 
 var ind = selectObject.selectedIndex; 
 if (ind==0) { alert('Please select a URL.'); } 
 else { 
 document.location = selectObject.options[ind].value; 
 } 
 return false; 
 } 
</script> 
</head> 
<body> 
<form id="my-form" action="capture-submit.php" method="get"> 
 <select name="url" id="url"> 
 <option value="">Select URL</option> 
 <option value="index.php?page=reels">Reels</option> 
 <option value="index.php?page=rods">Rods</option> 
 <option value="index.php?page=lures">Lures</option> 
 <option value="index.php?page=tackle-line">Terminal Tackle &amp; Line</option> 
 <option value="index.php?page=tools">Knives &amp; Tools</option> 
 <option value="index.php?page=bait">Bait</option> 
 </select> 
 <input type="submit" id="submitButton" value="Go!"> 
</form> 
</body> 
</html>


This does the same thing, just a little more specifically (and probably more efficient.) You'd still want to use an interim script to capture the submit if JS is disabled.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Server Side / PHP Server Side Scripting 2:06 am Apr 28, 2026