/beyond/webmaster/projects/article.php/3487841/Order-Form-Part-4-On-the-Fly-calculations-step-two.htm Order Form Part 4: "On the Fly" calculations, step two

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

By Vince Barnes

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

  • 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