[Penn Computing Web]

Using GotoMenu on a Web Page

You will want to use GotoMenu if you are creating a drop-down menu where the user can get to another website by choosing a menu option. GotoMenu is a CGI script which redirects a user to a different web page based on the web address chosen from a drop-down menu. It reads the "value" you defined in the <option> tag that the user chose. Because it is a script and not HTML, it must be accessed using an HTML form. The "action" of the form must be the GotoMenu script.

All you have to do is create the drop-down menu. GotoMenu will direct the users where you want them to go. On this page, you will find an explanation of how GotoMenu works and how to utilize it on your web page, both with and without Javascript.

How GotoMenu Works

As already mentioned, GotoMenu is a CGI script. To access it upon form submission, the call must be written in the "action" tag exactly as you see it here and you need to use the "post" method of submitting information.

<form method="post" action="/cgi-bin/gotomenu">

The "name" of the menu in the <select> tag must be "destination" in order for the GotoMenu script and the Javascript code to function properly. If you choose to use the Javascript-enhanced implementation (explained below), then the "onChange" direction is necessary to redirect the user as soon as a menu option is chosen, without waiting for the user to click on a button. It should be written exactly like this in the <select> tag

onChange="location.href=this.form.destination.options[this.form.destination.selectedIndex].value"

As with any HTML drop-down menu, the text written to the right of the <option> tag corresponds to the "value" set in the same <option> tag.

Every form has a submit button which the user clicks on to submit the information they entered in the form. The "value" of the submit button is the phrase you want to be written on the button. It does not have to be "GO". If you use Javascript, you can set up your form to hide the submit button when it detects your users have Javascript enabled. To do this, you use the <noscript> tag. The web browser knows if the user has Javascript enabled and interprets the tag accordingly. The code looks like this.

<noscript><input type="submit" value="GO"></noscript>

Using GotoMenu with Javascript

In order to be able to use GotoMenu, you will need to include the following code. Everything in italics is what you can specify to personalize your drop-down menu. You may have as many <option> lines as you want. The one marked "selected" is the default option. You can mark any option you want as "selected", but you can only mark one. In brief, if your user has Javascript enabled on their browser, the "GO" button will not appear on the screen. If Javascript is turned off, the "GO" button will allow the user to choose the desired menu option.

<form method="post" action="/cgi-bin/gotomenu">
<select name="destination" onChange="location.href=this.form.destination.options[this.form.destination.selectedIndex].value">
<option selected value="/index.html">Choose your destination
<option value="http://www.upenn.edu/">PennWeb homepage
<option value="http://www.upenn.edu/computing/">PennWeb Computing
</select>
<noscript><input type="submit" value="GO"></noscript>
</form>

Using GotoMenu Without Javascript

You do not have to incorporate the Javascript enhancement into your usage of GotoMenu. You can write your drop-down menu such that the "GO" button will always appear and the user will always have to select it to reach their chosen destination. To do this, you need only write the basic HTML code for a menu without any of the Javscript code.

Everything in italics is what you can specify to personalize your drop-down menu. You may have as many <option> lines as you want. The one marked "selected" is the default option. You can mark any option you want as "selected", but you can only mark one.

<form method="post" action="/cgi-bin/gotomenu">
<select name="destination">
<option selected value="/index.html">Choose your destination
<option value="http://www.upenn.edu/">PennWeb homepage
<option value="http://www.upenn.edu/computing/">PennWeb Computing
</select>
<input type="submit" value="GO">
</form>

Related Resources

For help with the HTML form, see our on-line documentation
For more information about Javascript, see the Javascript FAQ



Information Systems and Computing University of Pennsylvania Comments & Questions