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

By Vince Barnes

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



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date