Business Sites     

 Web Applications      Web Site Hosting      Search Engine     
CompanyWeb.net: Web Hosting, Internet Programming, Search Engine Optimization

 


CompanyWeb Articles

Book Reviews
Columns

Web-Source Topics...

Horse's Mouth
ProBizTips

CompanyWeb Search



Web Design Master Series Article

Web Design Master Series Article is syndicated from Web-Source.net.

Syndicated articles are written by independent authors and the contents represent the author's views. The content of the article does not necessarily represent the views of Company Web staff and management.

Master Series

 Counting and Math with JavaScript

By William 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 you started.

The demo does all actions mentioned above.

The JavaScript is copy and paste. The form will probably require modification to fit your needs.

The demo is at http://willmaster.com/a/22h/pl.pl?demo226. 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.

Whenever a widget color is checked or unchecked, the JavaScript updates:

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.

The Form

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 total.

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.

The form and JavaScript are quite versatile.

Going down into the form, you'll notice that the checkbox fields are all name="Widgets". When the JavaScript counts the checkboxes checked, this is what it counts. Each checkbox calls the JavaScript function CalcTotalOrder() 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 CalcTotalOrder() JavaScript function is also called whenever the field's value is changed.

The JavaScript

The JavaScript in the demo is immediately above the form. When you use the code, it may be in that position or in the HEAD area of the page, whichever you prefer.

The function CalcTotalOrder(), the last function of the JavaScript section, is the main function. It calls other functions as needed, then updates the form fields.

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 cost.

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.

The JavaScript can be modified.

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 cost line.

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 out.

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 lines.

Using It

To use, simply put the demo page on your site. Then modify as needed. See http://willmaster.com/a/22h/pl.pl?demo226 to pick up the demo.

Will Bontrager

Copyright © 2000 - 2003 Bontrager Connection, LLC

About the Author:
William Bontrager Programmer/Publisher, "WillMaster Possibilities" ezine mailto:[email protected]

Are you looking for top quality scripts? Visit Willmaster and check out his highly acclaimed Master Series scripts. Some free, some for a fee.

Content Provided By:

More Master Series Articles...

 

Frontpage, NT are Trademarks of Microsoft Corporation. CompanyWeb Site Copyright (c) 1998 - 2003, CompanyWeb.net Site Development Service Group.