JavaScript - Total an Order Form
A script that totals items using checkboxes and/or select lists.
Add up prices * number of orders per item to get the tally
Examples
Setting up the script
- Download the OrderForm script: orderform04.js
-
Include the script. Put the following between the <head></head> tags in your page.
<script type="text/javascript" src="orderform04.js"></script>
-
Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> -
Make sure your html matches the naming conventions in the OrderForm script,
or change the values in the script.
You need unique ids for the form, text output,
checkboxes, select lists, and the span tags that wrap the prices.
Here is a simple xhtml example with the default name formats.
<form id="frmOrder"> <p> <input type="checkbox" id="chk0" /> Wonder Widget $<span id="txtPrice0">10</span> <select id="sel0"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> <option value="val3">3</option> </select> </p> <p> <input type="checkbox" id="chk1" /> Snow Widget $<span id="txtPrice1">20</span> <select id="sel1"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> </select> </p> <p> <input type="text" id="txtTotal" size="8" /> </p> </form>
- That's all you should need to get it working. Most changes to the html (such as removing the checkboxes) shouldn't require changes to the script. Refer to the Notes below for additional tips.
Notes
- This script can be used to total an order form in which there are checkboxes and order quantity (selectable from a drop down).
- The total updates when a checkbox is checked or unchecked, and when an item's quantity is changed.
- Price data is stored in the html, not the javascript.
- Unchecking an item sets the drop down to 0. Checking an item sets the drop down to 1.
- Can format the html any way you want, but need a few things:
- Synch up your element IDs and the values in function Order
- Prices should be wrapped in span tags, numbers only.
- The corresponding select element IDs and input checkbox IDs need to be numbered the same.
- The html example on this page doesn't submit anywhere. When setting up your own order form that will be submitted, add name attributes for whatever elements you want to be sent server side.
-
As of v0.4, when constructing the OrderForm object, there are three optional parameters:
OrderForm(prefix, precision, firstChoice)
- The prefix is only useful if you need more than one form on the same page (such I'm doing with the examples above).
- For precision, if set to 0 or above, that's the number of places the total will be rounded to. If set to -1, no rounding is done.
- The firstChoice argument is used to set where the first quantity value is in your select lists. If not set, it defaults to 1. Refer to Sample 4 above for an example where it's set to 2.
- If you want to set firstChoice and not prefix or precision, then pass in null for prefix and -1 for precision.
- You can include a total button, but it'll just be redundant, because the checkboxes and select lists trigger will retotal.
JavaScript Source
Public Domain
OrderForm v0.4 (found in the orderform04.js file)
is released to the public domain. See Terms & Conditions
for details. The content on this page is still copyrighted.
orderform04.js (5 KB)