Intranet Design: Client-Side Corner: JavaScript III

IDM	Client-Side Corner
[ Archive \| Current \| F A Q \| f i n d \| comment? ]	Enriching the Intranet User Experience

Putting JavaScript to Work
JS/Configurator: A Computer Cost Estimator

By Reaz Hoque
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.

Creating the Back-end

Defining Variables:

Now let's go step-by-step to create the back-end of the program. First we define the following variables:
Listing 8.2. Variables for custom computer estimator scripts
var called=false; //to make sure the function compute() is called
var T_Price=0; //the default for total price is always $ 0
var pr_flag; //processor flag for keeping track of the choices
var pr_print="";

var sp_flag; //flag for Speed
var sp_print;

var ram_flag; //flag for RAM
var ram_print;

var hdrive_flag; //flag for Hard Drive
var hdrive_print;

var vram_flag; //flag for VRAM
var vram_print;

var fdrive_flag; //flag for Floppy Drive
var fdrive_print;

var cd_flag; //flag for CD ROM
var cd_print;

var mn_flag; //flag for Monitor
var mn_print;

var mos_flag; //flag for Mouse
var mos_print;

var kb_flag; //flag for Keyboard
var kb_print;

var modem_flag; //flag for Modem
var modem_print;

var software_flag; //flag for software
var software_print;

var card_flag; //flag for Sound Card
var card_print;
As you can see from the comments, most of the variables have been used to keep track of the selection options. The variable T_Price is used to addup the price of all the selected components. The Boolean variable was used to make sure the compute() function is called.
function compute():
This is most important function in this program. This function keeps track of all the options chosen by the user and does the final calculation The following listing shows most of the code for the function (to get the complete code, simply View Source on the finished configurator):
Listing 8.3. Partial Listing for function compute().
function compute(form){
called=true;

//-------Processor----------
if (form.processor[0].selected){
 pr_flag=0;
 pr_print= "None [$0]";
}
 
else if (form.processor[1].selected){
 pr_flag =540;
 pr_print="68LCO45 DD [$540]";
}

else if (form.processor[2].selected){
 pr_flag =340;
 pr_print="68LCO45 EE [$340]";
}
 
else if (form.processor[3].selected){
 pr_flag =680;
 pr_print="68LCO45 FF [$680]";
}
 
else if (form.processor[4].selected){
 pr_flag =421;
 pr_print="68LCO45 GG [$421]";
}

//-------Speed----------
if (form.speed[0].selected){
 sp_flag=0;
 sp_print="None [$0]";
}

else if (form.speed[1].selected){
 sp_flag=110;
 sp_print="60 MHz [$110]";
}

else if (form.speed[2].selected){
 sp_flag=145;
 sp_print="66/33 MHz [$145]";
}

else if (form.speed[3].selected){
 sp_flag=199;
 sp_print="75 MHz [$199]";
}

else if (form.speed[4].selected){
 sp_flag=235;
 sp_print="100 MHz [$235]";
}

//-------RAM-----------
if (form.ram[0].selected){
 ram_flag=0;
 ram_print="None [$0]";
}

else if (form.ram[1].selected){
 ram_flag=75;
 ram_print="4 MB RAM [$75]";
}

else if (form.ram[2].selected){
 ram_flag=120;
 ram_print="8 MB RAM [$120]";
}

else if (form.ram[3].selected){
 ram_flag=200;
 ram_print="16 MB RAM [$200]";
}

else if (form.ram[4].selected){
 ram_flag=350;
 ram_print="32 MB RAM [$350]";
}

//-------Hard Drive-------
if (form.hdrive[0].selected){
 hdrive_flag=0;
 hdrive_print="None [$0]";
}

else if (form.hdrive[1].selected){
 hdrive_flag=100;
 hdrive_print="250MB [$100]";
}

else if (form.hdrive[2].selected){
 hdrive_flag=200;
 hdrive_print="500MB [$200]";
}

else if (form.hdrive[3].selected){
 hdrive_flag=300;
 hdrive_print="750MB [$300]";
}

else if (form.hdrive[4].selected){
 hdrive_flag=399;
 hdrive_print="1.0GB [$399]";
}

//------- VRAM -------
	// VRAM code goes here
//------- Floppy -------
	// Floppy code goes here
//------- CD ROM -------
	// CD ROM code goes here
//---------- Monitor -----------
	// Monitor code goes here
//----------- Mouse ------
	// Mouse code goes here
//---------- Keyboard -----------
	// Keyboard code goes here
//---------- Modem -----------
	// Modem code goes here
//---------- Sound Card -----------
	// Sound Card code goes here

//----------calcuation of price
T_Price=pr_flag+sp_flag+ram_flag+hdrive_flag+vram_flag+ fdrive_flag
+cd_flag+mn_flag+mos_flag+ kb_flag+modem_flag+card_flag;

//-----display of price------------
form.T_Price.value=" $ "+ T_Price;
}
You might be saying to yourself, the code repeats itself with different objects. You are absolutely right! We used the same code pattern to handle each of the component selections.

If you look at the first line of this function, you will notice that we assigned true to called. The reason we actually used this variable as a Boolean is because, the user might press Print Preview, before pressing the button for Update Price. As you have seen that this function keeps track of all the options, if the user pressed Print Preview button before they pressed the button Update Price, the information of all the choices will not be seen in our print preview window.

Next you will notice an if statement. This is used for the array of choice for the first component. Recall that in JavaScript, the first element of an array is defined as the 0th (not the 1st!) element. So the array for the first selection option looks like this:
Array[0]=Select
Array[1]= 68LOCO45 DD [$540]
Array[2]= 68LCO45 EE [$340]
Array[3]= 68LCO45 FF [$680] 
Array[4]= 68LCO45 GG [$421]
Back to our if statement. Notice carefully how we called our first option from processor inside the if statement. Remember that we did not name the form anything in HTML. So all we needed to do is call the array element of the object, its property and we got the object (in our case a form).

In the if statement, if the user chooses the first option from processor, we assign pr_flag=0 and pr_print="None [$0]". The reason we assign pr_flag=0, as in other selection options as well, is because Select has a value of 0. Naturally, if the user presses the button named price before choosing any of the options from any of the selection options, you are bound to get a zero for your price. When that happens, if the user presses the button Print Preview you will see that for all the components there will be None [$0] next to them.

As you can see, we used else if statements in processor to assign the appropriate price for each option to pr_flag ($540, $40, $680 and $421). We also assigned the appropriate component choice for each selection in pr_print for the print preview window.

The next selection option is speed. Like before, we used if and else if statements to find out if the user has selected one the elements of this object.

After we are done with all the selection options we now need to add all flags. For this we use the variable T_Price. This simple addition method is shown below:
T_Price=pr_flag+sp_flag+ram_flag+hdrive_flag+vram_flag+fdrive_flag+cd_flag+
mn_flag+ mos_flag+ kb_flag+modem_flag+card_flag;
Finally we need to display the value of T_Price in our text box. To do that we need to replace the blank property of the text box, value with T_Price. So, we do the following:
 form.T_Price.value=" $ "+ T_Price;
function print():
This function will create a window with the listing of all the choices chosen by the user as well as the computed price. Here is the listing:
Listing 8.3. Listing for function print()
function print(form){
 if(!called){
 compute(form);
 }

text = ("<HEAD><TITLE>'UniVista On-line Computer Cost
Estimator'</TITLE></HEAD>");
text = (text +"<BODY BGCOLOR = '#FFFFFF' ><CENTER>
UniVista On-line Computer Cost Estimator 
</CENTER>");

text=(text+"<hr>");

text=(text+"<TABLE BORDER =0><TR VALIGN=Top><TD VALIGN=Top>");
text=(text+"Processer: Speed: Monitor: 
Hard Drive: Floppy Drive: Memory:");
text=(text+" VRAM: CD-ROM: Sound Card: 
Modem: KeyBoard: Mouse: ");
text=(text+"</TD><TD>")

text=(text+""+ pr_print+" "+sp_print+" "+ mn_print+" 
"+hdrive_print+" ");
text=(text+ fdrive_print+" "+ram_print+" "+ vram_print+" 
"+cd_print+" ");
text=(text+card_print+" "+ modem_print+" "+kb_print +" "
+mos_print );
text=(text+"<TD></TR></TABLE><hr>");
text=(text+"Total Cost:"+"      
$"+T_Price);
text=(text+" 
To print, choose FILE and PRINT.");
text=(text+"</body></html>");

msgWindow=window.open("","displayWindow","toolbar=no,
 width=375,height=480,directories=no,status=yes,scrollbars=yes,
 resize=no,menubar=yes");
msgWindow.document.write(text);
}
In this function, first we made sure that the compute() function is called. Next we had a variable text which carried all the information necessary to create a new page. For example, we defined the BGCOLOR of the document, as we would do to make a new HTML page.

After our page is made we used the window object to create a new window. Notice the properties that were used in our new window.
toolbar=no
width=375
height=480
directories=no
status=yes
scrollbars=yes
resize=no
menubar=yes
Finally, we use the document property write to display the text. Voila! The complete JS/Configurator is online for you to experiment with, download and customize for your own pages.

About the Author

Reaz Hoque (pronounced Re-oz Hawk) is an author, software developer and a web designer. Recently he worked on the development team for one of the world's first on-line commercial applications for General Electric's startup company Public Sourcing Services. In addition to web development, Reaz is accomplished in Pascal, Visual Basic, Assembler, C++, and SQL. His articles are seen regularly on various online and print magazines. Since May, 1997, Reaz has been a Technology Evangelist for Netscape Communications Corp. He can be reached with comments at rhoque@rhoque.com.

Reprinted with permission from Practical JavaScript Programming by Reaz Hoque.
Copyright © Reaz Hoque, 1996. All Rights Reserved.

[ Archive | Current | F A Q | Find | comment? ]

Copyright 1997 by Mecklermedia Corp. All rights reserved.