Fast Redirector

Overview

If you have a large number of links, it is often useful to have a dropdown (select in HTML) to choose what page you want to go to (or what file you want to download) together with a Go button. The problem is that using a select you cannot specify a link directly, but only a name and value to be used in the subsequent HTTP request. This means that if you want to use it as a link of lists, you can either use a server-side Script to redirect the requests, or client-side Javascript to send the browser to the right page directly.

The Javascript solution is faster, because it makes the request directly, but may not work on all browsers; the server-side solution is slower, because it has to do one additional request to the server, but will work on all browsers. This script, together with a server-side script, will use the fast (Javascript) way on all browsers which support it, and the slow (server-side) way on the ones which don't.

Documentation

The script is very simple; it has only one function, fastRedirect(selectId).

To use it, you have to do the following:

Give the dropdown (select in HTML) an id and a name attribute with the same value.
Put the following code in the onsubmit attribute of the form containing the select object:
```
return fastRedirect('name');
```
where name is the value of the id you gave the selector.
Put the URLs (absolute or relative) of the page you want to redirect to into the value attribute of the option tag. That's it.

Example Usage

Include the script in your HTML page:

<script type="text/javascript" lang="javascript"
		src="fastredirector.js"></script>

Add a call to the fastRedirect function to the onsubmit attribute of the form tag, and put the server-side redirector in the action attribute:

<form method="get" action="redirect.cgi" onsubmit="return
		fastRedirect('my_selector');">

Set the id and the name of the select tag to the same value as in the creation of the FastRedirector object. The ID is needed to find the element in Javascript; the name is needed if the form is submitted to the server (for the HTTP redirector script). Also set the values of the options to the same values you used in the add calls:

<select id="my_selector" name="my_selector">
  <option value="page1.html">Page 1</option>
  <option value="page2.html">Page 2</option>
  <option value="page3.html">Page 3</option>
</select>

Of course, you also need a server-side redirector script. Here's an (ugly) example in Python:

#!/usr/bin/python

import cgi

fs = cgi.FieldStorage()
loc = fs.getvalue('my_selector')
# Location URIs must be absolute
print 'Location: http://your.domain/your-path/%s\n' % cgi.escape(loc)

Browser Compatibility

Fastredirector should work on all browsers, independently of whether they support and/or have Javascript enabled or not.

If Javascript is supported and enabled, then fastredirector should use the fast (client-side) method; otherwise, it should use the slow (server-side) method. As Javascript implementations are very different, and often of a very poor quality, it might cause script errors on some browsers. Here's a list of browsers I tested.

Browser	Works
Firefox 1.0	yes
Mozilla 1.7	yes
Netscape 4.77	no
Internet Explorer 4.0, 5.0, 5.5, 6.0	yes
Opera 5, 6, 7	yes
Opera 3	no
Konqueror 3	yes

Demo

Have a look at the demo page to see the script in action.

Download

Download FastRedirector: (584 B).