Sunset at Oak Island, North Carolina

Spider Web Woman Designs

How to create a "Pick List" page with a dropdown list and generate a detail page using the FrontPage Database Wizard


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.


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

  1. Create a new page and save it as display1.asp
  2. Insert | Database | Results
  3. Use an existing database connection: myautos
  4. Record source: cars
  5. Click More Options, Criteria, Add, and use company as the field name, make sure that the "Use this search form field" box is checked.
  6. Click OK 3 times.
  7. Click Next.
  8. Click Next
  9. Display all records together, uncheck the box "Add search form", and click Finish
  10. Save the page (as display1.asp).
  11. Close display1.asp

Part 2 - create the "pick list" page

  1. Create a new page and call it dropdown.asp
  2. Save the page (as dropdown.asp).
  3. On the Insert menu, point to Form, and select Form.
  4. Delete the Reset button.
  5. Position your cursor within the form, to the left of the Submit button.
  6. On the Insert menu, point to Database, and select Results.
  7. In step 1 of the wizard, select your database connection (myautos). Click Next.
  8. In step 2 of the wizard, select your record source (cars). Click Next.
  9. 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.
  10. In step 4 of the wizard, click to select Drop-Down List from the list of formatting options. Click Next.
  11. In step 5 of the wizard, click Finish.
  12. 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.
  13. Preview in Browser again and now you will see each company only appear once.
  14. In FrontPage, in Design View, right-click on the form, select Form Properties, Send to other: Custom ISAPI, NSAPI, CGI, or ASP Script.
  15. 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.


Email UsWe're on Google+LinkedIn ProfileFollow us on TwitterLike Us on Facebook!