https://github.com/lance/formtotal

A simple javascript class that dynamically adds up the values of form fields and updates a "total" field.
https://github.com/lance/formtotal

Last synced: 11 months ago
JSON representation

A simple javascript class that dynamically adds up the values of form fields and updates a "total" field.

• Host: GitHub
• URL: https://github.com/lance/formtotal
• Owner: lance
• License: mit
• Created: 2009-02-12T15:35:18.000Z (over 17 years ago)
• Default Branch: master
• Last Pushed: 2009-02-15T13:29:46.000Z (over 17 years ago)
• Last Synced: 2025-04-05T03:41:53.870Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 129 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.textile
  • License: LICENSE.txt

Awesome Lists containing this project

README

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

h2. Usage

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

  

@@

@@

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.

h2. 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);

  });