Order Form Part 4: “On the Fly” calculations, step two

We have our form built,
and have started to add in the "calculate on the fly"

JavaScript code (see the previous
step in this project), and now we need to create the "calculate" function,
and it’s assistants.

 

The purpose of the
calculate( ) function is to extend the price for each item on the order form and
to add up the total amount.  Since each extended amount and the total
amount are all money fields, it would make sense for us to create a function to
nicely format money fields for display.. This function will then be available to
be invoked by the calculate( ) function each time it needs to present a money
field.  Thus, this function will "assist" the calculate( ) function in
doing its job.  Here is just such a function:

 

function dm(amount)
{
string = "" + amount;
dec = string.length – string.indexOf(‘.’);
if (string.indexOf(‘.’) == -1)
return string + ‘.00’;
if (dec == 1)
return string + ’00’;
if (dec == 2)
return string + ‘0’;
if (dec > 3)
return string.substring(0,string.length-dec+3);
return string;
}

 

OK! Let’s go through it
and see what’s happening.  First, you can see that we’ve called our
function "dm" (for Display Money – but it could be anything.)   The
function accepts one

parameter which it knows as "amount".

 

The first thing the
function does is to convert the incoming parameter (amount) to a string called
"string" by assigning ( the = operator) amount concatenated (the + operator) and
a null value (a literal of zero length: "" ) to a variable called string:

 

string = "" + amount;

 

The next statement uses
the

indexOf( ) 

method of string to search string for a period: string.indexOf(‘.’) and
subtracts the returned index value from the length

property of string, putting the result in a variable called "dec".

 

Next, we check to see if
a period was not found (indexOf( ) will return a value of  -1 when the
searched for character (or string) is not found), and if not, we exit the
function (return) returning string with ".00" concatenated.  Thus, if we
had been passed 12 for example, we would return 12.00 – a nicely formatted money
amount.

 

For the next few
statements we must remember the the length property of a variable is the actual
length of the variable (for example 123.1 would have a length of 5) but that
index values in JavaScript start counting at zero, so the the period in 123.1
has a index value of 3.

 

So, if our index value (dec)
is equal (the == operator) to 1, then our string ends with a period (for example
123. has a length of four and the period gives an index value of 3.  4-3 =
1.)  In this case, we return our string with 00 concatenated, so that if we
had been given 123. we return 123.00 which is exactly what we want.  If you
follow this same logic, you will see that when dec has a value of 2, the input
string must have a single decimal digit and we need to concatenate one 0 and
return.

 

If dec has a value
greater than 3 then our input string has more that two decimals.  In this
case our function is going to drop the extra decimals (those past the two normal
decimals of a money value.)  If you think about our order form, you will
realize that should never be the case, because we should only be multiplying a
whole number quantity by a money amount which we control, and which we can be
sure will not have more than two decimals.  We put this code here because
it’s a sound programming practice, but we will not concern ourselves with
rounding issues because we don’t expect them.  If they occur, we might want
to look elsewhere in our Order Form page for programming errors.

 

To truncate, we use the

substring( ) method of our string variable, string.  Looking at our
instruction we can see that it is "string.substring(0,string.length-dec+3)" that
does the work.  The .substring method is saying: create a substring of
string, starting at index 0 and continuing for a length equal to
string.length-dec+3    To break this down, let’s consider an
example.  Suppose we were passed 123.321 — this would give us a
string.length of 7, and a dec value of 4 (the period has an index value of 3, so
7-3 = 4.) Thus, string.length-dec+3 is the equivalent of 7-4+3 which is 6. 
Our substring then, starting at index value 0 and continuing for a length of 6
is 123.32 which is exactly what we want.

 

Having eliminated all
possible values of dec except 3, we can now  simply return our original
string unchanged.  This is because it must already have exactly two decimal
places. So:

 

return string;

 

This concludes our
display money function, so now lets get on to the main calculation function.

                                           

 

 

Return to the previous step  | 
Proceed to the next step