Lawrence gotourl instructions

Drop-down Menu to go to a URL

Description:

This helper explains how to make a "drop down menu" similar to the following that lets you jump to another web page.

Requirements:

Create a form using the following command:

  <form method="post"
    action="http://www.lawrence.edu/cgi-bin/goto_url.pl">

Create an item in the form with the name "New_URL" (case is important) and a value of the URL you want to be redirected to. You must enter the complete URL, relative URLs won't work.

This technique works with ALL web browsers that support forms, even if they do not support javascript. For example, it will work with the "lynx" web browser.

Example:

Here is the form used to create the example at the top of this page:

  <form method="post"
    action="http://www.lawrence.edu/cgi-bin/goto_url.pl">

   
  <select name="New_URL" size="1">
    <option value="http://www.lawrence.edu/">Lawrence Home Page</option>
    <option value="http://www.lawrence.edu/admissions/">Lawrence Admissions Office</option>
  </select>

<input type="submit" name="submit_button" value="Go!">
  </form>

You can improve this by combining the above with javascript commands. These do two things. First, it makes your page more efficient, because if javascript is enabled, the web browser can jump to the destination web page itself without having to contact our server to run the script. Also it's nicer for users because they don't need to select the "Go" button. However, including our script makes sure this will also continue to work with web browsers that do not have javascript available.

The following example displays a menu. If javascript is not available or turned off, the user can select the location to jump to, and select the "Go" button. However, if javascript is available, the browser will use javascript to do the same thing without hitting the "goto" button.

Try reloading this page with Javascript turned off, then on, to see how the following example changes.

To get this:

enter this:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin gotosite
function gotosite(){
var URL =
document.gotoform.New_URL.options[document.gotoform.New_URL.selectedIndex].value;
window.location.href = URL;
}
// End gotosite -->
</script>

<form
  name="gotoform"
  method="post"
  action="http://www.lawrence.edu/cgi-bin/goto_url.pl">



  <select name="New_URL" size="1" onChange="gotosite()">
    <-- Value of first option is default, usually current page -->
    <option value="http://www.lawrence.edu/committee/web-steer/webdev/">Select a Site...</option>
    <option value="http://www.lawrence.edu/">Lawrence Home Page</option>
    <option value="http://www.lawrence.edu/admissions/">Lawrence Admissions Office</option>
  </select>

  <noscript>
  <!-- use noscript to only show this if no javascript is available -->
  <input type="submit" name="submit_button" value="Go!">
  </noscript>

</form>