Do Calculations On Multiple Form Fields - jQuery jAutoCalc

File Size: 198 KB
Views Total: 24901
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Do Calculations On Multiple Form Fields - jQuery jAutoCalc

AutoCalc is a jQuery plugin created for the shopping cart of your online store that allows to dynamically calculate the values of your form fields similar to the Excel.

Supported formulas:

  • SUM: sums numbers
  • AVG: returns the average of the field values
  • MIN: returns the smallest value
  • MAX: returns the largest value
  • COUNT: counts all form fields
  • COUNTNOTEMPT: counts all non-empty fields 

Supported operations:

  • add
  • subtract
  • multiply
  • divide
  • power

See also:

How to use it:

1. To get started, insert the jQuery AutoCalc plugin after jQuery library and we're ready to go.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="dist/jautocalc.js"></script>

2. Add formulas to your form fields using the jAutoCalc attribute as follows. Note that each form field must have an unique name.

<input type="text" name="qty" value="1">
<input type="text" name="price" value="9.99">
<input type="text" name="item_total" value="" jAutoCalc="{qty} * {price}">
  ...
<td><input type="text" name="total" value="" jAutoCalc="SUM({item_total})"></td>

3. Initialize the AutoCalc plugin and done.

$('form').jAutoCalc();

4. Plugin's default options.

$('form').jAutoCalc({

  // default attribute
  attribute: 'jAutoCalc',

  // thousand separator
  thousandOpts: [',', '.', ' '],

  // decimal separator
  decimalOpts: ['.', ','],

  // decimal places
  decimalPlaces: -1,

  // do the math right away?
  initFire: true,

  // allows chained calculation?
  chainFire: true,

  // do the math everytime keys are pressed
  keyEventsFire: false,

  // are the results read-only?
  readOnlyResults: true,

  // shows parse error
  showParseError: true,

  // treats empty as zero
  emptyAsZero: false,

  // smart intergers?
  smartIntegers: false,

  // callback
  onShowResult: null,

  // custom functions
  funcs: {},

  // custom constants
  vars: {}
  
});

Changelog:

v1.4.2 (2021-09-18)

  • if a field name in an equation is prefaced with "!" e.g "{total} / {!qty}" the value of the field will still be used in the equation but a change to the field will not cause a recalculation

v1.4.0/1 (2021-04-01)

  • if a field name in an equation is prefaced with "!" e.g "{total} / {!qty}" the value of the field will still be used in the equation but a change to the field will not cause a recalculation

v1.3.1 (2021-02-11)

  • Values are attempted to be parsed after cleansing to see if they are valid, stop process if the value is not valid.

v1.2.2 (2021-02-11)

  • Fix IE11 compatibility

v1.2.1 (2020-08-18)

  • Don't execute chainFire unneccesarily

v1.2.1 (2020-08-18)

  • Don't execute chainFire unneccesarily

This awesome jQuery plugin is developed by c17r. For more Advanced Usages, please check the demo page or visit the official website.