Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c17r/jautocalc
jQuery plugin: does equation calculations using form input fields
https://github.com/c17r/jautocalc
calculations jquery jquery-plugin
Last synced: 3 months ago
JSON representation
jQuery plugin: does equation calculations using form input fields
- Host: GitHub
- URL: https://github.com/c17r/jautocalc
- Owner: c17r
- License: mit
- Created: 2010-09-21T00:13:15.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2023-03-14T22:13:25.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T00:25:06.737Z (9 months ago)
- Topics: calculations, jquery, jquery-plugin
- Language: TypeScript
- Homepage:
- Size: 1.81 MB
- Stars: 27
- Watchers: 3
- Forks: 23
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
# jQuery AutoCalc
Plugin to automate and simplify "on-the-fly" calculations. The simplest use is to set the jsAutoCalc="" attribute on an input text tag and call `$("*").jAutoCalc();`
## Installation
`npm i -P jautocalc`
Includes:
- Development version with sourcemaps:
- `dist/jautocalc.js` - 24KB
- `dist/jautocalc.js.map`
- Minimized production version:
- `dist/jautocalc.min.js` - 8KB
## Features
* The calculation is run when one of the value fields gains or loses focus or when the result field is changed. Each calculation is also run once when the page is first loaded in case all the value fields come from the database.
* Field names are defined with braces, i.e. "{tax_amount}". If the field name is prefaced with "!" e.g. "{!tax_amount}" then the value will be used in the equation but it will ignore changes to that field for that equation only.
* Field names can be jquery selectors.
* Whitespace in the calculation is ignored.
* When multiple fields have the same name aggregate functions may be used. The plugin supports:
* SUM
* AVG
* MIN
* MAX
* COUNT - counts all fields
* COUNTNOTEMPTY - counts all non-empty fields
* It can handle add, subtract, multiply, divide, and power (as **) in the proper order of operations. It will respect parentheses.
* It can handle negative numbers and decimal numbers.
* If a calculation value field has no value yet, the result field is set to blank.
* when the result is calculated, the result field's change event is fired. This is so calculations can be chained together. In a shopping cart example, the grand total calculation relies on the subtotal calculation which relies on the sum of the line totals which rely on the quantity and amount fields.
* It will try to figure out what the currency symbol, thousands separator, and decimal separator are and, if found, reuse them in the result field. By default, if it can't figure out the symbols it will use comma for thousands, period for decimal, and no currency symbol.
## Options
* attribute (string; default is `'jAutoCalc'`): The name of the attribute to look for to set up the auto calculation.
* thousandOpts (string array; default is `[',', '.', ' ']`): Possible options to use as the thousand separator. Will use the first one it finds in the value fields to format the result field. If you know this will always be the same, set the option to a single element array.
* decimalOpts (string array: default is `['.', ',']`): Possible options to use as the decimal separator. Will use the first one it finds in the value fields to format the result field. If you know this will always be the same, set the option to a single element array.
* decimalPlaces (number; default is `-1`): By default the plugin follows the rules for significant digits (the result is as significant as the least significant value). There are cases when you might want to override this behavior, i.e. shopping cart where the item quantity will be whole numbers, but the item total should contain decimals.
* initFire (boolean; default is `true`): After configuring the value and results fields involved in a calculation, should the calculation be fired right away? Useful if the value fields are pre-filled from some other source, e.g. database.
* chainFire (boolean: default is `true`): After calculating the result field value should the field be flagged as changed to potentially fire other calculations?
* keyEventsFire (boolean: default is `false`): Should the plugin do "instant-calculations" everytime keys are pressed in a value field? By default, calculations are fired when focus is entered or lost on a value field.
* readOnlyResults (boolean: default is `true`): Should the plugin mark the result field(s) as read-only and be un-editable by the user?
* showParseError (boolean: default is `true`): Should the plugin show the parser errors as an alert box? Useful for debugging/testing.
* emptyAsZero (boolean: default is `false`): empty values are treated as zero.
* smartIntegers (boolean: default is `false`): numbers like 123.000 treated as 123.
* onShowResult (function(el, value): default is `null`): called just before updating element with result.
* funcs (dictionary: default is `null`): user-defined functions.
* vars (dictionary: default is `null`): user-defined constants.
## Working Example
```html
<!--
$(function() {
function autoCalcSetup() {
$('form#cart').jAutoCalc('destroy');
$('form#cart tr.line_items').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
$('form#cart').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button.row-remove').on("click", function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button.row-add').on("click", function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr.line_items').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
});
//-->
Item
Qty
Price
Item Total
Remove
Stuff
Remove
More Stuff
Remove
And More Stuff
Subtotal
Tax:
CT Tax
Tax Free
Total
Add Row
```
See the working example at http://c17r.github.io/jAutoCalc/sample.html