Chami.com Tips

Home > Tips > Internet > Creating an active drop down list using CGI

300+ book mentions, 95% thumbs up, millions of downloads. Get HTML-Kit Tools for $39 (limited time offer)

Web Hosting Web Hosting UK Dedicated Servers Domain Names

Categories

» Internet
HTML
JavaScript
Programming
Windows

Keywords

CGI
HTML
Internet
Intranet
Mini Tutorial
Perl
Source Code

Downloads

redir.pl dropdown.html option.html

Creating an active drop down list using CGI

See Also

So you have a JavaScript enabled drop-down list of options on your web page to make it easier to navigate your site. What about the visitors without JavaScript enabled browsers? Unless you have another way to get around your site, your visitors without JavaScript maybe at a lost.

Here's how to solve the above problem by using a server-side CGI script to handle the drop-down list, rather than using client-side JavaScript. Wondering why anyone would even bother with a JavaScript solution if a CGI solution would accommodate other users? Well, unfortunately most free web space providers do not allow installing new CGI scripts in the free space they provide. The other reason is, even if you have CGI access, installing CGI scripts takes experience and patience if you have never installed a CGI script before.

First, let's look at the CGI script itself. We're using the Perl language to write the CGI script because it's the most widely supported server side scripting language for web servers. Don't forget to change the file extension of the following script from "*.txt" to "*.pl" or "*.cgi" depending on your web server requirements. Because there is no standard set of instructions that would work on every web server when installing Perl CGI scripts, we're not going to spend time on that here. Your web space provider should be able to let you know if you have CGI access and point you to instructions specific to your web server.

#!/usr/bin/perl

sub xcgi_InitForm
{
  my($h) = '[a-fA-F0-9]';
  my($buff, @params, $param);
  my($param_name, $param_value);
  local(*xcgi_form) = @_ if @_;

  read(STDIN, $buff, $ENV{'CONTENT_LENGTH'});

  @params = split(/&/, $buff);

  foreach $param (@params)
  {
    ($param_name, $param_value) = split(/=/, $param);

    $param_value =~ tr/+/ /;
    $param_value =~ s/%($h$h)/pack("C",hex($1))/eg;

    $xcgi_form{$param_name} = $param_value;
  }
}

{
  my(@form);

  xcgi_InitForm(*form);

  $url = $form{'url'};
  print "Location: $urlnn";
}

Listing #1 : PERL code. Download redir.pl (0.44 KB).

Once you get the above CGI script installed on your server, let's say under "/cgi-bin/redir.pl" on your server, simply create an HTML form with a dorp-down list named "url" as follows:

<form method="POST" action="/cgi-bin/redir.pl">

<SELECT NAME="url">
<OPTION VALUE="http://www.chami.com/tips/">
Select a page to visit and click GO</OPTION>

<OPTION VALUE="http://www.chami.com/tips/html/">
HTML Tips</OPTION>

<OPTION VALUE="http://www.chami.com/tips/windows/">
Windows Tips</OPTION>

</SELECT>

<input type="SUBMIT" value="GO">
</form>

Listing #2 : HTML code. Download dropdown.html (0.35 KB).

Your drop-down list choices should be listed in-between <SELECT ...> and </SELECT> tags. The URL for the choice should be listed under the VALUE attribute and the display name of the choice should be in-between <OPTION ...> and </OPTION> tags. For example, to add a choice named "Chami.com home page" with the web page address "http://www.chami.com/" add the following tags to the above form.

<OPTION VALUE="http://www.chami.com/">
Chami.com home page</OPTION>

Listing #3 : HTML code. Download option.html (0.2 KB).

Applicable Keywords : Common Gateway Interface, HTML, Internet, Intranet, Mini Tutorial, Perl, Source Code

Previous Tip : Using multiple submit buttons on a single form
Random Tip : Getting user input the easy way
Next Tip : How to make Explorer, Netscape, Mozilla or Opera your default browser