Counting and Math with
Bontrager Copyright © 2003
If you have an order page and want to present the customer with order total
as items are chosen, with or without tax or shipping charges, or if you want
to count the number of checkboxes checked on a form, this article will get
The demo does all actions mentioned above.
to fit your needs.
The demo is at
It is expected that you will have the demo available for reference while
reading the rest of this article.
The demo sells widgets at $116.50 each.
Up to twelve widgets can be purchased, each a different color. Tax is 5.5%.
Shipping is 4% of product total with a $10.00 minimum.
1. The number of widgets currently chosen.
2. The total product cost.
3. The amount of the tax.
4. The shipping charges.
5. The total cost of the order.
If you've tried the demo, you've seen it work. If you haven't, try it now.
Grab the source code from the "Plain Demonstration Page," linked below the
index page demo. We'll be referring to it.
Have a look at the hidden form fields. You'll see four:
1. name="PriceEach" specifies the price per widget.
2. name="TaxPercent" specifies the tax percentage of product total.
3. name="ShippingRate" specifies the shipping charge per 1.00 of product
4. name="ShippingMinimum" specifies the minimum shipping charge.
All, some, or none need be used in your implementation. It depends on what
calculations you need, if any.
If you merely want to present the number of checkboxes checked, you won't
need any of the above.
name="PriceEach" can be use to multiply any number by the number of checkboxes
checked; it doesn't need to be a monetary amount.
The name="TaxPercent" can be used for any percentage calculation requirements.
The shipping hidden fields can be used for calculations when multiplication
of a decimal fraction is required, with or without a minimum.
Going down into the form, you'll notice that the checkbox fields are all
whenever it is clicked, whether it's checked or unchecked. CalcTotalOrder()
automatically updates the form fields in the second half of the form.
The second half of the form are the fields where the calculations are presented.
You'll notice that these contain the "readonly" attribute to make the fields
read only. In case the user tries to change the automatically updated form
fields (not all browsers understand the "readonly" attribute), the
value is changed.
code, it may be in that position or in the HEAD area of the page, whichever
is the main function. It calls other functions as needed, then updates the
First, it calls function NumberOfWidgetsCheckboxesChecked(), which counts
the number of checkboxes checked.
Then, it calls functions:
1. CalcProductTotal(), which multiplies the number of checkboxes checked
by the price each. It then returns the result. This provides the product
2. CalcTax(), which divides the tax percentage by 100 then multiplies the
result by the product cost to get the tax amount.
3. CalcShipping(), which multiplies the shipping rate by the product cost
to get the shipping charge. If the result is less than the minimum shipping
charge, the shipping charge is increased to match the minimum.
After that, the product cost, the tax amount, and the shipping charge are
added together to get the total cost of the order.
If you don't need tax or shipping calculations, simply remove or comment
out (to comment out, put "//" without the quotes at the beginning of the
line) the unnecessary lines from the CalcTotalOrder() function. If you need
only the number of checkboxes checked, remove or comment out the the product
If any lines removed or commented out contain variables consulted when the
total cost of the order is calculated, then those variables will need to
be removed from the total cost calculation line. Of course, if you don't
need the total cost calculated, the entire line can be removed or commented
The rest of that main function, CalcTotalOrder(), formats the numbers into
currency decimal numbers (if needed) and/or inserts commas next to every
third number (if needed). Then, it updates the form fields.
If you remove or comment out any lines in the first part of this function,
do the same to the corresponding number formatting and form field updating
To use, simply put the demo page on your site. Then modify as needed. See
to pick up the demo.
Copyright © 2000 - 2003 Bontrager Connection, LLC
About the Author: