Step 7: Create the field that will hold the JavaScript keyword array and place it within the <script> tags

In this step we'll go back to the form and add a field named "tmpJavaScriptarray". Add this field just underneath the line <script language="JavaScript"> which was added in step 4.

The WebQueryOpen agent for this form inserts the view contents formatted as a JavaScript array into this field.

The field type should be "text" and "computed for display".

The field name should be "tmpJavaScriptarray".

In the field default value, type tmpJavaScriptarray, setting the value of the field to itself.

The results of this step should appear as in Figure F.

FIGURE F

The results should look like this.

Step 8: Create an "onload" event in the HTML header
When the HTML page is first loaded by the Web browser, we need the JavaScript UpdateModel() function to execute, filling field B (the Model field) with the appropriate values corresponding to the current value of field A (the Manufacturer field).

The way to do this is to go to the form and add the following code the to "HTML Head Content" form property:

This is shown in Figure G.

FIGURE G


Add the code to the form property. Roll over picture for a larger image.

Step 9: Add the agent to the "WebQueryOpen" on the form
When the HTML page is first loaded by the Web browser, we need the agent created in step 6 to execute.

The way to do this is to go to the form and add the following code the to "WebQueryOpen" form property:

This is shown in Figure H.

FIGURE H


Add the code to the form property. Roll over picture for a larger image.

Step 10: Set to pass-thru HTML
On the form, hit control-A or from the edit menu and choose "select all".

From the "Text" menu, ensure the "Pass-thru HTML" is ON for the entire contents of the form.

Save the form.

Step 11: Test & finish
Whew! What a step-by-step marathon. I hope you hung in with me.

As I mentioned earlier, the individual steps are all easy to understand and easy to implement, but there's quite a few of them.

At last it should all be together and working. Try it out by typing the following into a Web browser:

It should appear as in Figure I.

FIGURE I


This is what you should see. Roll over picture for a larger image.

Change the value in the Manufacturer field, and the values of the Model field should update to show the models available for that Manufacturer. Woo hoo!

Where to from here?
Dynamic drop down menus are extensively applicable in many Web applications.

Using this technique is great for navigating through lists of employees via workgroup. If you'd like to see it in action, I've made extensive use of this in my TaskMaster application that you can access live on the Internet at http://www.touchdown.com.au/trytaskmaster.html.