Yahoo Answers is shutting down on 4 May 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

Ash
Ash asked in Computers & InternetProgramming & Design · 1 decade ago

List/Menu form needs action on submit?

I have a form with a list created with links assigned for each option

Code:

<form id="form1" name="form1" method="post" action="">

<label for="Search by Category">Search by Category</label>

<p><select name="Search by Category" id="Search by Category" accesskey="1" onChange="go()">

<option value="1.html">Accounting </option>

on submit I want the selected option (there are about 100) to link to it's page

ie: on submit if "dance" is selected I want 4.html to be the next page that pops up like an option menu to navigate a business directory

i'm looking for a code something like onchange go

java would be ok

but basically its just a list with 100 options and 100 co-ordinating pages and when you select your entry point and press submit i want it to link to that page

no, i dont want to use css or spry menus.

I would prefer not to use PHP or ASP or any other server side scripting

here is an example:

http://shelbycountychamber.chambermaster.com/direc...

i want something similar to their business directory option 1

Thanks!

2 Answers

Relevance
  • richarduie
    Lv 6
    1 decade ago
    Favourite answer

    <html>

    <head>

    <script>

    function go( sRef ) {

    // which option number was selected?

    var idx = sRef.selectedIndex;

    // if "none" option, exit immediately

    if (0 == idx) return;

    // get the collection of options

    var opts = sRef.getElementsByTagName( 'OPTION' );

    // get fully-qualified url from selected option

    var url = opts[idx].value;

    // load the requested url

    window.location = url;

    }

    </script>

    </head>

    <body>

    <form>

    <!--

    include a "none selected" option to ensure that selection

    forces a change event on the select control - set that option

    to be initially selected

    -->

    <select onchange="go(this);">

    <option value = "none" selected> none selected </option>

    <option value = "http://www.google.com">/ google </option>

    <option value = "http://www.yahoo.com">/ yahoo </option>

    <option value = "http://www.stumbleupon.com">/ stumbleupon </option>

    </select>

    </form>

    </body>

    </html>

  • savesheep
    1 decade ago

    Hello!

    (edit: Apparently yahoo is truncating my scripts...so make sure you goto the two links I sent you to copy the code exactly!)

    There are actually two ways to do this. One way is to use the go button:

    <form name="jump">

    <p align="center">

    <select name="menu">

    <option selected>Quick Links(Chose one) </option>

    <option value="http://website1.edu/%22%3EName1%3C/option%3E

    <option value="http://website2.edu/%22%3EName2%3C/option%3E

    <option value="http://website3.edu/%22%3EName3%3C/option%3E

    <option value="http://website4.edu/%22%3EName4%3C/option%3E

    </select>

    <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

    </p>

    </form>

    The other way is to get rid of the go button all together and just have the link go immediately upon selection.

    <script language="JavaScript">

    <!--

    function MM_jumpMenu(targ,selObj,restore){ //v3.0

    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

    if (restore) selObj.selectedIndex=0;

    }

    //-->

    </script>

    <select name="select" onChange="MM_jumpMenu('parent',this,1)">

    <option value="dreamweaver_tips.asp" selected>Dreamweaver Tips</option>

    <option value="/Fireworks/default.asp">Fireworks Tutorials</option>

    <option value="/Flash/default.asp">Flash Tutorials</option>

    <option value="/website_design/default.asp">Web Design Tutorials</option>

    </select>

    Hope this helps!

    Source(s): Go Button: http://www.wac.ohio-state.edu/tutorials/forms/jump... No Go Button: http://www.entheosweb.com/website_design/jump_menu...
Still have questions? Get answers by asking now.