Post
Ask Question

How to Program a HTML ListBox to Redirect to Other Web Pages

Redirection to another web page is one of the most basic and necessary functions in website design. The usual way to proceed is illustrated by something like this using the HTML <a> hyperlink tag (Note: “(dot)” has been substituted for “.” and the left arrow and right arrow symbols have been replaced by the “[“ and “]” symbols, respectively to preserve formatting for viewing purposes):

  1. [a href=http://www (dot) anywebsite (dot) com/anywebpage.html]Any Web Page[/a] 
And this is fine if you are adding a small number of links to your page. But what if you have a large number of hyperlinks in the page, because you are redirecting to periodical web pages that are put out every day, week or month? Although the links would work fine, it would begin to provide your web page a cluttered look. This in turn may give some site visitors the impression you are somehow unprofessional in the way you present things.

Another problem this could create is with Search Engine Optimization (SEO). If some of the key words in your web page's title tag are used in the URLs or anchor text of all those hyperlinks, then a large number could throw off your keyword density for the page. If it exceeds 10%, you could get red flagged by the search engines for “keyword stuffing”.

A viable solution for that

I use a HTML list box to organize hyperlinks into a neat and compact format. This is the technique I use to organize my monthly technical tip publications in my "fix my computer" web page (Note: the left arrow and right arrow symbols have been replaced by the “[“ and “]” symbols, respectively, to preserve formatting for viewing purposes):
  1. [p]  
  2. Please select a [em]"TEKTIP"[/em] web page to view:[br]  
  3. [select size="10" onchange="document.location.href='http://www.analyzohiosoftware.com/tektip' + this.value;"]  
  4. [option value="_122011.html"]December 2011[/option]  
  5. [option value="-012012.html"]January 2012[/option]  
  6. [option value="-022012.html”]February 2012[/option]  
  7. [option value="-032012.html"]March 2012[/option]  
  8. [option value="-042012.html"]April 2012[option]  
  9. [option value="-052012.html"]May 2012[/option]  
  10. [option value="-062012.html"]June 2012[/option]  
  11. [option value="-072012.html"]July 2012[/option]  
  12. [option value="-082012.html"]August 2012[/option]  
  13. [option value="-092012.html"]September 2012[/option]  
  14. [option value="-102012.html"]October 2012[/option]  
  15. [option value="-112012.html"]November 2012[/option]  
  16. [/select]  
  17. [/p] 
Here's what happens. When the site visitor clicks on an item in the list box, the “onchange” event is fired. This runs a JavaScript directive called:
  1. “document.location.href='http://www.analyzohiosoftware.com/tektip' + this.value;" 
This will redirect to the web page to the right of the “=” symbol in the expression.

The web page that is redirected to must be constructed on the fly. The “http://www.analyzohiosoftware.com/tektip“ string is concatenated to the contents of “this.value”, that represents the list box selection that is clicked by the site visitor. As an example, if the user clicks the “February 2012” selection from the list box, then the concatenated result will be: “http://www.analyzohiosoftware.com/tektip-022012.html“. The corresponding value component of “February 2012” is added to the end of the string “http://www.analyzohiosoftware.com/tektip“. Then the site visitor is redirected to “http://www.analyzohiosoftware.com/tektip-022012.html“.

Using a HTML list box to organize your hyperlinks looks nicer to your website visitors and it really does help to make a more positive first impression.


Similar Articles