Decision Tool, Part 2

(to see a preview of how this is supposed to look, click here.)

Once you have your form set up, save it as decision.html. Then create a new HTML file called result.html, and just put in some filler that says
Your results will appear here.

Next, we will put these two pages together inside a frame set. Create a new file, called frames.html. In this file, type or copy the following:

When you view this file, you should get a window with two frames. On the left, you should see your decision form, and on the right you should see the results page.

Once the frames are working, we want to make sure that we can use the form on the left to write to the screen on the right.

  1. On the decision form, change the "onClick" statement on the button in the form to read onClick = 'process(this.form)'.

  2. On the decision form page, somewhere between the head and /head tags, put

    What this function does is say that we are going to write "hi" on the document named right that is a child of the parent to this document. Confusing?

    The document with the form is called decision.html. Its parent is called frames.html. That parent has another child called result.html that was assigned the name right when we created the frameset. So to get the word "hi" to appear where we want, we need to point to the parent, then point down to the other child, then say document.write("hi").

  3. When you have this code inserted into decision.html, save it and then view the file frames.html (refresh, if necessary). Try clicking the button on your form. The screen on the right should change to say "hi."

Now, we need another button that allows us to clear the screen on the right. On your form, create a button like this:

<input type = "button" value = "Start over" onClick = 'parent.right.document.location ="right.html";'>
Creating Real Output

From now on, everything we will be doing will involve modification of the JavaScript code on the decision.html page. What we need to do is create a database and write a function that will find elements within that database that satisfy the criteria chosen by the user.

First, we need to read the input from the user and report back to the user the results. (Incidentally, make sure that your form lists the options using the value = property. On Friday, I incorrectly used name =. My current version of decision.html is correct.)

In my college decision form, this means that I change the JavaScript to read:

Once you get something like this working, you need to create a database and some code to find the items in the database that match the user's criteria. Here is the Javascript code that I added after the code listed above.