Monday, August 5, 2024

# Order Form Part 5: “On the Fly” calculations, step three

Now that our "assistant"
function is in place, we a re ready to add in the main calculate( ) function
itself.  As we did in the

last section
, let’s first take a look at the function:

function calculate()
{

QtyA = 0; QtyB = 0; QtyC = 0;

TotA = 0; TotB = 0; TotC = 0;

PrcA = 1.25; PrcB = 2.35; PrcC = 3.45;

if (document.ofrm.qtyA.value > "")

{ QtyA = document.ofrm.qtyA.value };
document.ofrm.qtyA.value = eval(QtyA);

if (document.ofrm.qtyB.value > "")

{ QtyB = document.ofrm.qtyB.value };

document.ofrm.qtyB.value = eval(QtyB);

if (document.ofrm.qtyC.value > "")

{ QtyC = document.ofrm.qtyC.value };

document.ofrm.qtyC.value = eval(QtyC);

TotA = QtyA * PrcA;
document.ofrm.totalA.value = dm(eval(TotA));

TotB = QtyB * PrcB;
document.ofrm.totalB.value = dm(eval(TotB));

TotC = QtyC * PrcC;
document.ofrm.totalC.value = dm(eval(TotC));

Totamt =
eval(TotA) +
eval(TotB) +
eval(TotC) ;

document.ofrm.GrandTotal.value = dm(eval(Totamt));

}

So, let’s break it down!
The first thing we do is to define some variables and initialize them to zero.
We need one for each quantity, and one for each total:

QtyA = 0; QtyB = 0; QtyC = 0;
TotA = 0; TotB = 0; TotC = 0;

No we define some
variables (which we’re going to use as though they were constants, meaning we’re
never going to change their values) to hold the prices of each item.  We
could as easily use the actual prices as constants in our calculations, but
defining them at this point will make it easy to find them when the prices
change in the future.  Good mnemonic names would help too, but we only have
three, so we’ll keep it simple:

PrcA = 1.25; PrcB = 2.35; PrcC = 3.45;

Now we set up some
variable values.  There are three sets on our form, all of which work
alike, so we’ll study the first set only.  To get at the fields on our form
we need to address the field name, which is with the form (which we’ll reference
by name) within the

document object
(which is the web page).  The format for doing this is
document.formname.fieldname — so in the case or our "A" quantity field it’s
document.ofrm.qtyA  Remember also that we need to get the

value property
of the field so it’s document.ofrm.qtyA.value

First we’ll check
whether there is anything to get from our field.  A test for Greater Than
null does very well for this.  If there’s something there we’ll assign it
to our QtyA work variable, thus:

if (document.ofrm.qtyA.value > "")

{ QtyA = document.ofrm.qtyA.value };

Now we’ll set up the
display field, putting in it whatever value is in our work field, whether it’s a
value retrieved from the form in the preceding statement, or the zero value with
which we initialized the variable:

document.ofrm.qtyA.value = eval(QtyA);

OK, on to the money
calculations!  All we need to do is to multiply the quantity by the price,
and assign the result to our total work variable:

TotA = QtyA * PrcA;

And now that that’s
there, we can format it to display on our page.  To do this, we’ll use the
"display money" function dm( ) that we created in the

last step
. You will notice also that, as in some previous statements, we use
the

eval built-in function
to ensure that we are always dealing with the
numerical evaluation of what might be either a string or a number.  In this
instance you can be fairly sure we are dealing with a number, but this is just a
sound coding practice.  Here’s the code:

document.ofrm.totalA.value = dm(eval(TotA));

The only thing left to
do is to calculate and display the grand total.  To accomplish this, we’ll
use all the same coding principles as in our previous calculations, thus:

Totamt =
eval(TotA) +
eval(TotB) +
eval(TotC) ;

document.ofrm.GrandTotal.value = dm(eval(Totamt));

Once we’ve completed the
function, we mustn’t forget the closing brace.  If you’d like to see how
our page is coming along, you can check it out (and try it out) by

clicking here
.

Did you try it out by
putting an alpha character in the quantity field?  Not very helpful, was
it?!  We’ll do something about that next.

### Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis