Need help with drop down form

  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6809
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Here is the code I am trying to modify to get my drop down to work. It is the same code for the jump to form used on this forum and many others.
Code: [ Select ]
<form method="get" name="jumpbox" action="viewforum.php" onSubmit="if(document.jumpbox.f.value == -1){return false;}"><table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td nowrap="nowrap"><span class="gensmall">Jump to:&nbsp;<select name="f" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Select a forum</option><option value="-1">&nbsp;</option><option value="-1">Site Stuff</option><option value="-1">----------------</option><option value="2">Updates</option><option value="3">Site Comments</option><option value="16">Tracker Problems</option><option value="4">Testing Forum</option><option value="5">Registration Issues</option><option value="-1">&nbsp;</option><option value="-1">Official CricketMX Forums</option><option value="-1">----------------</option><option value="6">New Releases / News</option><option value="7">Suggestions</option><option value="8">Bugs</option><option value="9">3rd Party Tools</option><option value="-1">&nbsp;</option><option value="-1">Help Forums</option><option value="-1">----------------</option><option value="10">Official Support</option><option value="11">Frequently Asked Questions</option><option value="12">CricketMX Links</option><option value="-1">&nbsp;</option><option value="-1">Members Only</option><option value="-1">----------------</option><option value="13">OT Forum</option><option value="17">Games Only</option><option value="14">Cool Software</option><option value="15">File Sharing</option></select>&nbsp;<input type="submit" value="Go" class="liteoption" /></span></td>
    </tr>
</table></form>
  1. <form method="get" name="jumpbox" action="viewforum.php" onSubmit="if(document.jumpbox.f.value == -1){return false;}"><table cellspacing="0" cellpadding="0" border="0">
  2.     <tr>
  3.         <td nowrap="nowrap"><span class="gensmall">Jump to:&nbsp;<select name="f" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Select a forum</option><option value="-1">&nbsp;</option><option value="-1">Site Stuff</option><option value="-1">----------------</option><option value="2">Updates</option><option value="3">Site Comments</option><option value="16">Tracker Problems</option><option value="4">Testing Forum</option><option value="5">Registration Issues</option><option value="-1">&nbsp;</option><option value="-1">Official CricketMX Forums</option><option value="-1">----------------</option><option value="6">New Releases / News</option><option value="7">Suggestions</option><option value="8">Bugs</option><option value="9">3rd Party Tools</option><option value="-1">&nbsp;</option><option value="-1">Help Forums</option><option value="-1">----------------</option><option value="10">Official Support</option><option value="11">Frequently Asked Questions</option><option value="12">CricketMX Links</option><option value="-1">&nbsp;</option><option value="-1">Members Only</option><option value="-1">----------------</option><option value="13">OT Forum</option><option value="17">Games Only</option><option value="14">Cool Software</option><option value="15">File Sharing</option></select>&nbsp;<input type="submit" value="Go" class="liteoption" /></span></td>
  4.     </tr>
  5. </table></form>


I changed it to this
Code: [ Select ]
<form method="get" name="jumpbox" action="viewpage.html" onSubmit="if(document.jumpbox.f.value == -1){return false;}"><table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td nowrap="nowrap"><span class="gensmall">Jump to:&nbsp;<select name="f" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Select a page</option><option value="-1">&nbsp;</option><option value="1">Page 1</option><option value="2">Page 2</option><option value="3">Page 3</option><option value="4">Page 4</option><option value="5">Page 5</option</select>&nbsp;<input type="submit" value="Go" class="liteoption" /></span></td>
    </tr>
</table></form>
  1. <form method="get" name="jumpbox" action="viewpage.html" onSubmit="if(document.jumpbox.f.value == -1){return false;}"><table cellspacing="0" cellpadding="0" border="0">
  2.     <tr>
  3.         <td nowrap="nowrap"><span class="gensmall">Jump to:&nbsp;<select name="f" onchange="if(this.options[this.selectedIndex].value != -1){ forms['jumpbox'].submit() }"><option value="-1">Select a page</option><option value="-1">&nbsp;</option><option value="1">Page 1</option><option value="2">Page 2</option><option value="3">Page 3</option><option value="4">Page 4</option><option value="5">Page 5</option</select>&nbsp;<input type="submit" value="Go" class="liteoption" /></span></td>
  4.     </tr>
  5. </table></form>


The problem is whenever you select the page it takes you to nothing but the page not found screen. I want to select Page 1 and to be taken to Page 1. I have made it doing that by changing
Code: [ Select ]
action="Page 1.html"
but then all the selections in the drop down take you to Page 1. Am I missing something simple? Please help.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

That form always goes to the same page because it is passing a value to the php script that will do the redirection. If you want the menu to work with javascript alone you will need to change some things. This is an example drop-down menu that works with javascript:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
<!--
function nav(f){
  theUrl = f.jump.options[f.jump.selectedIndex].value ;
  if (theUrl != ""){
                location.href = theUrl ;
  }
}
//-->
</script>
</head>
<body>
<form action="no_value">
<select name="jump" onchange="nav(this.form)">
<option value="">----- Select A Page -----</option>
<option value="index.html">Home</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script language="javascript" type="text/javascript">
  5. <!--
  6. function nav(f){
  7.   theUrl = f.jump.options[f.jump.selectedIndex].value ;
  8.   if (theUrl != ""){
  9.                 location.href = theUrl ;
  10.   }
  11. }
  12. //-->
  13. </script>
  14. </head>
  15. <body>
  16. <form action="no_value">
  17. <select name="jump" onchange="nav(this.form)">
  18. <option value="">----- Select A Page -----</option>
  19. <option value="index.html">Home</option>
  20. <option value="page2.html">Page 2</option>
  21. <option value="page3.html">Page 3</option>
  22. </select>
  23. </form>
  24. </body>
  25. </html>


You can use absolute or relative urls inside the option values. The example used has relative urls, but you could replace index.html with http://www.yourdomain.com/index.html.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6809
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Obviously I need to change the option value's to my url's, is there anything else that I need to change to get this to work?

Thank you for your help.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I don't think so, but if you have any trouble let me know.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6809
  • Loc: Martinsburg, WV

Post 3+ Months Ago

It worked :D

Mad props to RichB 8)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 51 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.