How to create a "Pick List" page
with a dropdown list and generate a detail
In this tutorial, written for FrontPage 2003, we are going to create a "pick list" page
containing a dropdown list generated from your database from which you can select a
value using the dropdown list and display the
details for those records on another page.. You can
the query in action before you start.
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 and the
database connection. Please review How to create a FrontPage Database Connection
for more information. For this tutorial, we will be using a database
called autos.mdb that you can download from this site.We are going to name the Database connection "myautos". We
are going to use the "cars" table.
Part 1 - create the detail display page
- Create a new page and save it as display1.asp
- Insert | Database | Results
- Use an existing database connection: myautos
- Record source: cars
- Click More Options, Criteria, Add, and use company as the field
name, make sure that the "Use this search form field" box is
- Click OK 3 times.
- Click Next.
- Click Next
- Display all records together, uncheck the box "Add
search form", and click Finish
- Save the page (as display1.asp).
- Close display1.asp
Part 2 - create the "pick list" page
- Create a new page and call it dropdown.asp
- Save the page (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
- On the Insert menu, point to Database, and select Results.
- In step 1 of the wizard, select your database connection (myautos).
- In step 2 of the wizard, select your record source (cars). Click
- In step 3 of the wizard, select Edit List and remove all of the
fields, except the field that will be used to query the
database. We are going to use "company" for the query. Click
OK. Click Next.
- In step 4 of the wizard, click to select Drop-Down List from the
list of formatting options. Click Next.
- In step 5 of the wizard, click Finish.
- Save the page and Preview in Browser. You will notice that each
"company" is displayed in the dropdown list more than
once. To eliminate the duplicates, in FrontPage, switch to Code
view, and find the SQL for the dropdown, in the gray-colored code.
It should look like this: s-sql="SELECT * FROM cars"
and change it s-sql="SELECT DISTINCT company FROM cars".
Save the changes while still in Code view. You will notice that once
you've saved your changes they are also made to the maroon colored
code - that is by design. The maroon colored code should never be
touched; it's generated by the gray code at save time.
- Preview in Browser again and now you will see each company only
- In FrontPage, in Design View, right-click on the form, select
Form Properties, Send to other: Custom ISAPI, NSAPI, CGI, or ASP
- Click on Options, and set the Action to: display1.asp. Click
OK twice. You have now set the form in dropdown.asp to post to
display1.asp when the user hits the Submit button. Save the page.
Part 3 - Test your pages
Preview dropdown.asp in your browser; choose a record from the
dropdown list and press Submit.