A simple javascript class that dynamically adds up the values of form fields and updates a "total" field.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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

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.


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.


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)) {
  	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);