For jQuery Calx 2.x, plaese refer to this page

What is jQuery-Calx?

jQuery Calx is powerful yet easy to use jQuery plugin for building a calculation form or calculation table, it’s parse provided formula and do calculation based on it, scan the form change and update the result automatically, format plain number into currency format, ordinal number, etc.

jQuery Calx was designed to allow user to easily configure their calculation form or calculation table, you may define as simple as ($A+$B) formula to the complex one such as PMT formula ($I*$P*((1 + $I)^$N)) / (1 - ((1 + $I)^$N)).

What operators are supported by jQuery-Calx

Currently, jQuery-Calx support standard calculation operator, nested parentheses, aggregation, etc.

  • [+,-,/,*] : standard addition, subtraction, divide and multiply. sample: ($A+$B/$C), etc
  • [^, SQRT] : power and square root also possible for calculation. sample: ($A^$B), (SQRT($C)), etc
  • [MOD]: modulus operator will find the remainder of division of one number by another. sample($A MOD $B);
  • [MAX,MIN,SUM,AVG] : simple aggregation function, it’s only work when the element id mimic the excel cell index such as A1, C4, etc. sample: (MAX($A1,$B6)).
  • [<,<=,>=,=,<>]: comparative operator, only usable with IF statement. sample: IF($A < $B, $A, $B).
  • [AND, OR]: logic operator, used within IF statement. IF($A < $B AND $B <> 0 AND $A <> 0, $A, $B).
  • [IF]: simple logic condition, you may nest the condition as deep as you want IF([condition],[true],[false]). sample: IF($A <> $B, $C, $D), IF($A = 1, $B, IF($A = 2, $B, $C))

for detailed documentation about formula operator and how to use it, please refer to ‘Using Formula with Calx‘ page.

Implementation sample

<form id="itemlist">
  Item  : <input type="text" id="A1" value="HDD Baracuda Black 2TB" /><br>
  Price : <input type="text" id="B1" data-format="$ 0,0[.]00" /><br>
  Qty   : <input type="text" id="C1" data-format="0" /><br>
  Disc. : <input type="text" id="D1" data-format="0[.]00 %" /><br>
  Total : <input type="text" id="E1" data-formula="($B1*$C1)*(1-$D1)" /><br>

<script type="text/javascript">

What is it useful for?

jQuery-Calx is useful when you need to build web based calculator, item and discount calculator, calculation table, etc. It also useful when you need to convert excel spreadsheet calculator into web based calculator.


If you found a bug, mis-calculation, strange behavior, as well as expect new feature, please kindly report an issue on github issue tracker or contact me directly here.

If you found a bug and able to fix it yourself, or add new feature to the calx, please kindly fork my  github repo and send a pull request.

If you found this plugin is useful for you but can not contribute any code or reporting any issues, you can also support the development by treat us some lunch 🙂