jQuery Calculation Plug-in (v0.1)

The Calculation plug-in is designed to give easy-to-use jQuery functions for commonly used mathematical functions.

This plug-in will work on all types of HTML elements—which means you can use it to calculate values in <td> elements or in <input> elements. You can even mix and match between element types.

Numbers are parsed from the element using parseNumber() method—which uses a regular expression (/-?\d+(,\d{3})*(\.\d{1,})?/g) to parse out the numeric value. You can change the regular expression that's used to determine what's consider a number by changing the default regular expression.

Download

Download the plug-in:
jquery.calculation.js
jquery.calculation.min.js

Interactive Examples

Syntax Examples

• $("input[@name^='price']").parseNumber();
  This would return an array of potential number for every match in the selector
• $("input[@name^='sum']").sum();
  Returns the sum of all the input objects that start with a name attribute of "sum". This breaks the jQuery chain.
• $("input[@name^=';sum']").sum("keyup", "#totalSum");
  Updates the "#totalSum" element with the sum of all the input objects that start with the name attribute of "sum" anytime the keyup event occurs within those fields. This does not break the jQuery chain.
• $("input[@name^='avg']").avg();
  Returns the average of all the input objects that start with a name attribute of "avg".
• $("input[@name^='avg']").avg("keyup", "#totalAvg");
  Updates the "#totalAvg" element with the average of all the input objects that start with the name attribute of "avg" anytime the keyup event occurs within those fields. This does not break the jQuery chain.
• $("input[@name^='min']").min();
  Returns the minimum value of all the input objects that start with a name attribute of "min".
• $("input[@name^='max']").max();
  Returns the maximum value of all the input objects that start with a name attribute of "max".

• $("[@id^=total_item]").calc(
  	// the equation to use for the calculation
  	"qty * price",
  	// define the variables used in the equation, these can be a jQuery object
  	{
  		qty: $("input[@name^=qty_item_]"),
  		price: $("[@id^=price_item_]")
  	},
  	// define the formatting callback, the results of the calculation are passed to this function
  	function (s){
  		// return the number as a dollar amount
  		return "$" + s.toFixed(2);
  	},
  	// define the finish callback, this runs after the calculation has been complete
  	function ($this){
  		// sum the total of the $("[@id^=total_item]") selector
  		var sum = $this.sum();
  		
  		$("#grandTotal").text(
  			// round the results to 2 digits
  			"$" + sum.toFixed(2)
  		);
  	}
  );

  This example shows off the code used quantity * price = total example shown above.

• $.Calculation.setDefaults({
  	// regular expression used to detect numbers, if you want to force the field to contain
  	// numbers, you can add a ^ to the beginning or $ to the end of the regex to force the
  	// the regex to match the entire string: /^(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})$/g
  	reNumbers: /(-|-\$)?(\d+(,\d{3})*(\.\d{1,})?|\.\d{1,})?/g
  	// should the Field plug-in be used for getting values of :input elements?
  	, useFieldPlugin: true/false
  	// a callback function to run when an parsing error occurs
  	, onParseError: null
  	// a callback function to run once a parsing error has cleared
  	, onParseClear: null
  });

  Use the setDefaults() method to change the default parameters for the Calculation Plug-in. If the Field Plug-in is loaded, then it will be used by default.