Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A simple javascript class that dynamically adds up the values of form fields and updates a "total" field.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
scripts
.gitignore
LICENSE.txt
README.textile
index.html
nextform.html

README.textile

formtotal

This is a simple javascript class that will add up input fields
with a class of addend in a form and place the running total
in an input field with an ID of total and ensure that field is
disabled.

Each time the total field is updated, a cookie is set in the
browser to maintain the total value. Any form field with the ID
of total will be prepopulated with the value of this cookie.

Usage

This code relies on Mootools. It has been tested and ships with version 1.2.1. Add the following lines to the <head> element of your HTML document.

<script type="text/javascript" src="scripts/mootools.js" charset="utf-8"></script>

<script type="text/javascript" src="scripts/formtotal.js" charset="utf-8"></script>

Add the addend class to all form elements to be included in the running total.
Set the id of the field containing the total amount to total. Serve chilled.

Customization

The Summarizer class just takes an array of DOM elements. When the page loads, the code waits for the DOM to be ready, gets all of the elements to be summarized, and passes those into the Summarizer constructor. It looks like this:


  window.addEvent('domready', function initialize() {
  	summary_fields = document.getElementsByClassName(addendClassName);
  	new Summarizer(summary_fields, totalFieldID, cookieName);
  });

It’s just getting the list of all DOM elements for a given class and passing those to the Summarizer constructor. So, to customize the script to use IDs, you’d change it to look something like this (this works with the sample form):


  window.addEvent('domready', function initialize() {
  	var summary_fields = [];
  	for(var i=1; i<6; i++) {
  		elementID = "invoice_amount_" + i;  // Change this line to specify what the ID is for the elements you want 
  		if ($(elementID)) {
  			summary_fields.push($(elementID));
  		}
  	}
  	new Summarizer(summary_fields, totalFieldID, cookieName);
  });

Or just manually create an array of elements you want to summarize, e.g.:


  window.addEvent('domready', function initialize() {
  	var summary_fields = [$('item1'), $('item2'), $('item3')];
  	new Summarizer(summary_fields, totalFieldID, cookieName);
  });
Something went wrong with that request. Please try again.