How to create a JavaScript Jump Menu using a Dropdown list generated from an Access Database

SUMMARY

In this tutorial, we are going to learn how to create a a JavaScript Jump Menu using a Dropdown list generated from an Access Database. This article applies to FrontPage 2000, 2002 and 2003.

MORE INFORMATION

This article assumes that you have already imported your database into your web, and that FrontPage has created the fpdb folder, put the database in that folder, and created the global.asa file, the _fpclass folder, and the database connection. Please review How to create a FrontPage Database Connection for more information.

For this tutorial, we will use a fictitious database with one table, called “websites”, with two fields, website_name and website_url.

Create a new page and save it as dropdown.asp.

On the Insert menu, point to Form, and select Form.

Delete the Reset button.

Position your cursor within the form, to the left of the Submit button.

On the Insert menu, point to Database, and select websites.

In step 1 of the wizard, select your database connection. Click Next.

In step 2 of the wizard, select your record source. Click Next.

In step 3 of the wizard, select Edit List and remove all of the fields, except website_name, the field you want to show in the dropdown list and website_url, the URL you want the user to jump to (note: the URL must be in http://www.example.com format). Click Next.

In Step 4, choose Dropdown List – one record per item. Display values from the field you are displaying (website_name), Submit values from the field containing the URL (website_url) . Click Next. Click Finish.

Switch to Code View, find this statement:

and add

id="setit"

so the statement looks like this:

While still in Code View, find this statement:

Change the value from “Submit” to “Go” (this is the text that gets displayed on the button)

and add

onclick="window.open(setit.options[setit.selectedIndex].value)"

So the statement looks like this:

Save the page while you are still in Code View and preview in browser.