Order Form Part 3: “On the Fly” calculations, step one

In the last part of this
short series, we added a form to our
Order Form web page.  Now it’s time to kick it up a notch! 

Anybody can have a form that asks you what you want, lets you fill it in and
displays what you type.  Bleaagh!  We want something interactive! 
Let’s have our form modify itself as the customer types.  Let’s calculate
all the prices and totals on the fly — displaying the results immediately after
they type, and before they hit "Submit"!

 

No problem!

 

There are several ways
this can be done, but all of them involve running some kind of code on the
client side (on the what? — for more about "sides" see

Goodies To
Go # 207  in the GTG archives.) 
There are some very powerful and safe technologies for running code on the
client side, such as Microsoft’s .Net (dot net) architecture, but while these
are indeed powerful and sophisticated technologies they also require a fair
amount of programming skill.  There is a technology available to the rest
of us, however, that is relatively simple to use, and is taught in a
Goodies
Tutorial!  It is, of course,
JavaScript.

 

As a simple client side
scripting language, JavaScript allows us to perform a variety of operations
within the browser on our client’s computer.  It can not, of course,
interact with any files or anything else on the client’s computer (except

cookies),
other than itself and the web page with which it is associated.  That’s
just fine for us….  that’s exactly what we need right now!

 

For our code, we’ll
write a function called "calculate" that will perform all the needed
calculations.  We’ll add the "onchange" event handler to all the quantity
and amount fields in our form to invoke the calculate function each time the
value of any of those fields is altered.  Notice that since some of the
fields are meant to be output only, such as the total amounts, and we still add
the event handler to them, the effect is that if the user modifies one of the
output field, their change is ignored and overwritten.

 

First, here’s the HTML
for our number fields, with the "onchange" event handler call in place:

 

<tr>
<td width="250">Class &quot;A&quot; Widgets</td>
<td align="center" width="100">

<input type="text" name="qtyA" size="5" tabindex="5" onchange="calculate()"></td>
<td align="right" width="60">1.25</td>

<td align="right" width="140">
<input type="text" name="totalA" size="12" tabindex="99" onchange="calculate()"></td>

</tr>
<tr>
<td width="250">Class &quot;B&quot; Widgets</td>
<td align="center" width="100">

<input type="text" name="qtyB" size="5" tabindex="5" onchange="calculate()"></td>
<td align="right" width="60">2.35</td>

<td align="right" width="140">
<input type="text" name="totalB" size="12" tabindex="99" onchange="calculate()"></td>

</tr>
<tr>
<td width="250">Class &quot;C&quot; Widgets</td>
<td align="center" width="100">

<input type="text" name="qtyC" size="5" tabindex="5" onchange="calculate()"></td>
<td align="right" width="60">3.45</td>

<td align="right" width="140">
<input type="text" name="totalC" size="12" tabindex="99" onchange="calculate()"></td>

</tr>
<tr>
<td width="250">&nbsp;</td>
<td align="center" width="100">&nbsp;</td>

<td align="right" width="60">&nbsp;</td>
<td align="right" width="140">&nbsp;</td>
</tr>

<tr>
<td width="250">
<p align="right"><b>TOTALS:</b></td>
<td align="center" width="100">&nbsp;</td>

<td align="right" width="60">&nbsp;</td>
<td align="right" width="140">
<input type="text" name="GrandTotal" size="15" tabindex="99" onchange="calculate()"></td>

</tr>
 

OK!  So now we need
to create our function.

 

Our simple, basic web
page is beginning to gain a little sophistication.  If you’d like to see
the page as it now is, with the form in place,
click here!

 

In the next step, we’ll
add the ability for the form to calculate itself "on the fly".

 

 

Return to the previous step  | 
Proceed to the next step