In this article, I'll walk you through the code you need to build an on-line computer cost estimator. This kind of live form, which lets you configure a system from a selection of available parts, is sometimes called a configurator. The JavaScript configurator developed here will serve as a working example of how the techniques in previous IDM columns can be combined to add real value to your web pages.

Using the JS/Configurator, you can give your customers choice and let the code calculate the price for their custom computer. As you probably know by now, the difference between a regular CGI-based form vs. one based on JavaScript is that client-side scripting makes form processing much faster. With JavaScript you don't have to wait for the server to process your submitted form.

So go ahead and change your choices as many times as you want -- then get the updated price instantly. Your customers will appreciate the time you save them!

The Front Door

Before we can start, we need to create a "front end" for the application using an HTML form. We covered HTML forms and their elements in an earlier column. Here, let's tailor one for the application at hand.

To make the form look nicer, we will take advantage of tables. We will be creating the form inside a table and make sure that the form is properly centered.

Next we define the form by: <FORM method=post>. (Either POST or GET will work in this example.) Inside the form, our first job is to create some selection options. To create the first selection option use the following code:

<SELECT NAME="processor">
<OPTION Selected>        Select
<OPTION>        68LCO45 DD [$540]
<OPTION>        68LCO45 EE [$340]
<OPTION>        68LCO45 FF [$680]
<OPTION>        68LCO45 GG [$421]
</SELECT>

Notice that we used the NAME attribute to name the selection. This is very important because when we call this form from our JavaScript function, JavaScript will need to know which selection option we are calling. The <OPTION> tag will let you create the options (which is the text written after each <OPTION> tag). All the selection options are created the same way. The only difference is that some might have five options, some might have only two options. When we compile this HTML page, you will notice that all the selection options are displayed and the first option in each list is highlighted.

Besides the selection options, we will create two buttons: one that will update the user's choices and put the calculated price in a text box and the other button will show the print preview of the custom computer. To create the first button we use the following code:

<INPUT TYPE="BUTTON" NAME="price"
Value="Update Price" onClick="compute(this.form)">

Notice that for this button to work, we used the event handler onClick. As described in a previous column, onClick will execute JavaScript code when the user clicks on the button. In the above code, onClick calls the JavaScript function compute(). The parameter inside the function compute(), this.form makes sure that the data is exported to the function from the current form.

Next we create a button called "Print Preview". This button creates a window with a list of all the user's choices for the custom computer as well as the price for each component chosen. The new window lets you print this information as well. We create the button by using the following code:

<INPUT TYPE="BUTTON" NAME="Print_data"
Value="Print Preview" onClick="print(this.form)">

CAUTION: If you do not click on Update Price button before you click on Print Preview button, the Print Preview window will not give you the listing for the selections you have selected. For example, if you just made all your selections and then clicked the Print Preview, you will see that your selections do not appear in the new window. Every time you change your selections, you will have to close the Print Preview window (if opened already), click on Update Price button and then click on the Print Preview button.

Again, we have used the onClick event handler. When this button is pressed, the function print() is called.

Lastly, we create the text box that will show the updated price. To define the text box, we use the following code:

    <INPUT TYPE="text" NAME="T_Price" Value="">

Notice that we left the value blank (Value=""). As you might have already figured out is that, we want to leave the text box blank until T_Price is pressed.

Now it's time to build the back-end logic that make the Configurator useful.

Page 1 2 3