JavaScript Primer: Site location drop downs

• Introduction
• The Code
• Usage
• Issues and Workarounds
• CGI Redirector

Introduction

The utility of this code is far greater than this single purpose, but this is the simplest way to explain it. You could use this, for example, in place of a site map, by including all major sections of your site on every single page. You could also generate this list of values dynamically. You may also pass parameter values in the values which will make the utility even greater.

The code

Below is the JavaScript required to make the user jump from one page on your site to another using a simple drop down box. This code will work in Microsoft Internet Explorer and Netscape Navigator like browsers. You may turn on or off line numbers to simplify cutting and pasting.

1. <script type="text/javascript" language="JavaScript">
2.	<!-- 
3.	function jump(fe){
4.		var opt_key = fe.selectedIndex;
5.		var uri_val = fe.options[opt_key].value;
6.		window.open(uri_val,'_top');
7.		return true;
8. 	}
9. 	//-->
10. </script>

Here is what each line of the code does:

1. Tell the browser that JavaScript is coming
2. Suppress JavaScript code from browsers that do not support it
3. Declare the jump() function which will drive the re-direct
4. Assign the selected item number from the select box (this step makes this code compliant with Netscape which handles the value attributes of Select boxes differently than IE)
5. Use the selection box number to assign the URL value from the select box to a variable.
6. Open a window to the _top which will over write the current page instead of launching a new window. If you have a named window to send this to, you may use this here.
7. Return true back to the form
8. Close the function jump()
9. Stop the suppression from older browsers
10. Tell the browser that we are done providing JavaScript code

Usage

Basic usage has the following form:

<form name="jumpto" method="get">
<select name="url" onChange="return jump(this);" size="1">
	<option value="http://www.af-design.com/">Select a Site</option>
	<option value="http://www.google.com/">Google</option>
	<option value="http://www.yahoo.com/">Yahoo</option>
</select>

Note the onChange attribute for the select box. Once the select boxes value is changed, the browser will trigger the jump() code causing the re-direct.

This example is the code above in action. Don't forget to use your browsers back button to get back to this page.

  
	Select a site
	Google
	Yahoo

Issues and Workarounds

Known issues with all JavaScript code include but are not limited to the fact that JavaScript is optional on all browsers and can be disabled.

If you are going to be using this code as a primary navigation piece on your site, it is recommended that a submit button be added and a scripting language file that can handle this re-direct be used. See the end of this page for CGI based re-direction handlers in some common web scripting languages.

If someone tabs to this select box and moves either up or down using the keyboard, they will only be able to surf to the items above and below the current selected item. This is more of a user interface issue than a bug, but it should be noted.

CGI Redirector

Only one of these files should be needed on your system. You will need to contact your web host to see which is supported. AF-Design uses PHP.

Cut the relevant code and save it in a file redirect with the appropriate technology extension for your application server. For example, if you use the PHP based script, save it as redirect.php. These redirect code snippets are the bare minimum to get the code up and running. Adding a check to see that there is a valid value or adding a default value to each of these is strongly recommended, however, beyond the scope of this primer.

Replace the start form tag with the following code. Make sure you update the action value to the appropriate technology you are using.

<form name="jumpto" method="get" action="filename.ext">

	<input type="submit" value="Go">

If someone has a better way to do this in ASP or JSP please let me know.

ASP Redirect

<%@ language="JScript">' %>
<%
	Response.Buffer = true;
	Response.Redirect(Request.QueryString("url"));
%>

ColdFusion Redirect

<cflocation url="#url.url#">

JSP Redirect

<%
response.sendRedirect(request.getParameter("url"));
%>

Perl Redirect

#!/usr/bin/perl
use CGI qw/:standard/;
$url = param('url'); 
print "Location: $url\n\n"

PHP Redirect

<?php
   header("Location: " . $_GET['url']);
?>

If you would like to provide another language redirect file to the above list, please send the code using the contact form, you will be given credit on this page.

Copyright (C) 2000-2009, Erik Giberti (AF-Design), All rights reserved.

Program as used in this license may refer to entire software packages, code snippets and binary image or visual information.

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA