Do Calculations On Multiple Form Fields - jQuery AutoCalc

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

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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></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: {}
  
});

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