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>
</form>

<script type="text/javascript">
    $('#itemlist').calx();
</script>

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.

Contribute?

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 🙂

<head><script type="text/javascript" src="js/jquery-calx-2.0.0.min.js"></script></head> <body> <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> </form> <script type="text/javascript"> $('#itemlist').calx(); </script> </body>

160 Comments

Madi September 13, 2022 at 11:25 pm - Reply
Hello,
I need help, please. The concatenate function I can put in jquery calx.
For example, in my excel I have the following formula:
=CONCATENATE(E3,F3,G3,H3,I3)
And I want to put the formula inside an input, will it be possible?
Thanks for any shared response.
Sagar Soni April 4, 2022 at 10:39 pm - Reply
Hello Geek,
I am using Calx 1.1.9.
I want to update the value of an input tag after calx() call.
If i do the same using jquery then on focus out of input tag it will reset the original calx calculated value which is 0 in my case.
Please suggest me, How to update value of an input tag after calx() call.
Gustavo Leal March 22, 2017 at 10:58 pm - Reply
Hi, great plugin,
I have an issue using calx, I am using c# mvc (bundle), sometimes I get an error saying that does not recognize calx (console says – Object doesn´t support property or method ´calx´) like if the js file was not loaded by the browser. The error is on IE 11. The order which I am using to load the files are (always loads on the same order):
1. jquery version 2.2
2. numeral version 1.5.3
3. moment version 2.17.1
4. calx version 2.2.7
My last test was changing the name of the js file trying to avoid cache or somtething like that (see next code).

Do you have an idea how to fix this issue?
Best Regards
Augusto July 27, 2016 at 2:43 am - Reply
HI! I need to process the difference between two dates and I don’t know how to do it. please help!
Mital January 25, 2016 at 8:49 pm - Reply
Hi,
Thank you for this great plugin.
I got one problem:
I use my formula like this: IF($DAX1>0,$DAX2+$DAX1,$DAX2-$DAX1)
If i set DAX1 as negative number using minus sign its not working IF still returns TRUE.
Thank you
- ikhsan January 25, 2016 at 9:14 pm - Reply
  Hi Mital,
  which version of calx you are using? I am testing with local sample using calx 2.2.5 (and should has no difference with other 2.x version as they are using the same parser), and it display the result correctly
  Best regards,
  Ikhsan
  - Mital January 26, 2016 at 9:32 pm - Reply
    Hi,
    Im using old version 1.1.9 .
    It returns incorrect value only if i enter negative number inside input field. Like “-300000”.
    “-” sign is unrecognized and calx always returns TRUE
    - ikhsan January 27, 2016 at 1:10 pm - Reply
      Hi Mital,
      I just tried to reproduce the issue, using simple formula, and it just work as expected, can you provide some sample?
      
      Regards,
      Ikhsan
Paul July 22, 2015 at 8:14 am - Reply
Hi Ikhsan,
This work you do is fantastic! Simplifies so much things.
I have a quick question, are we able to do a print function with the values from the form?
Thanks
Paul
- ikhsan July 22, 2015 at 4:31 pm - Reply
  Thanks Paul,
  If you print the form directly from the browser, the value should be printed automatically
Quentin May 14, 2015 at 1:46 am - Reply
Hi! I’m trying to use this formula
SUM((($G7*$A18)+($G8+$G9))*12) but it isn’t working
and I don’t see why?
Error: Parse error on line 1:
…300)+(2000+4000))*12)
———————–^
Expecting ‘+’, ‘-‘, ‘*’, ‘/’, ‘>’, ‘<', '=', '^', 'MOD', 'OR', 'AND', ',', got ')'
http://paniquepas.ca/calcule/js/jquery-calx-1.1.9.min.js
Line 44
Thank You!
- Quentin May 15, 2015 at 9:57 pm - Reply
  Forget it, thanks for your help.
Dim April 25, 2015 at 2:59 pm - Reply
Dear Frinds,
I am a newbie with programing at all and JavaScript also.
I found this awesome tool for calculating and I am very excited for it!
Could you please guide me to implement my idea?
Here is the idea:
I want to separate two or three sheets with values. I want to calculate separately and at the bottom of the page to sum all sheets. I’ve try to use SUM(A1:C12), but without result.
How can I do this with success?
Thank you very much!
- ikhsan April 25, 2015 at 5:17 pm - Reply
  Hi Dim,
  If you need to access cell on another sheet, you can use similar syntax used in excel, like #form1!A1+#form2!A2
Henk April 24, 2015 at 7:01 pm - Reply
I think this is exactly what I am looking for!! You mentioned a WordPress plugin, have you had any success with that? We would gladly pay for that plugin, especially if it functions as well as advertised!
- ikhsan April 24, 2015 at 7:28 pm - Reply
  Dear Henk,
  We are still working on it, but the release schedule is a bit postponed due to another project.
  Regards,
  Ikhsan
Vlad February 25, 2015 at 8:43 pm - Reply
ikhsan, Thanks for the plugin. Excellent work. I do have a couple questions.
1. I use CMS and my forms coming from database. the the page is loaded the calculations not working. There is no errors but nothing works.
When I view source and save source as HTML the form works just fine.
I believe the problem is in the late binding of the page. Is there a way I can force the plugin to rerun after full page load?
I tried to call update $(‘#myTest’).calx(‘update’); inside and outside of $( document ).ready but it didn’t work
2. data-cell properties is there a way for them to be id of the control? I’m dynamically generating form and it would be much easier
```
<input name="Control1" type="text" id="Control1" value="2" data-cell="Control1" data-format="$ 0,0.00" spellcheck="false"><br>
<input name="Control2" type="text" id="Control2" value="2" data-cell="Control2" data-format="$ 0,0.00" spellcheck="false">


<input type="text" id="Total" name="G5" data-cell="G5" data-format="0,0[.]00" data-formula="Control1+Control2">
```
if i can use control id data-cell=”A11″
- ikhsan February 25, 2015 at 8:55 pm - Reply
  Hi Vlad,
  1. The problem seems strange, could you console.log or alert something before the calx init to check if the calx was initialized?
  2. Yes, in calx 2, data-cell attribute is used as cell identifier, but if you are using calx 1, id attribute is used for cell identifier
  Regards
  Ikhsan
Ikram February 24, 2015 at 8:20 pm - Reply
Hi
How do I set predefine value (loading from database and etc.) for any textbox with formula?
- ikhsan February 24, 2015 at 8:45 pm - Reply
  Hi Ikram,
  Unfortunately, text-box with formula is special and read-only in calx, which just placeholder for the calculation result, but you can set value on the other textbox so the textbox with formula will reflect the result.
  Basically, when textbox with formula is given specified value, the other textbox that current textbox is depend on need to be adjusted as well, which need a process to reverse the formula, There is some “goal seek” algorithm that can be implemented in calx and reverse the formula, but it is quite tricky
  regards
  Ikhsan
SB February 12, 2015 at 11:34 pm - Reply
What a great plugin! Thanks 🙂
One question: how can I easily replace the dollar sign with a euro sign? Replacing the sign in “data-format=”$ 0,0.00″ ” doesn’t work. Thanks for the help 🙂
- ikhsan February 13, 2015 at 12:06 am - Reply
  Hi SB,
  You are welcome 🙂
  You can configure currency formatting by set up numeraljs before loading calx.
  Please refer to http://numeraljs.com/ to see how to setup currency symbol.
  Regards,
  Ikhsan
CaptainMad February 12, 2015 at 12:55 am - Reply
Hi there
Definitely great stuff
A couple of questions:
– is there a way to use other names than A1,B2, … I generate forms with php program and had to name each field CELL1234 (painfull for radio buttons or check box) and I wish I could use variables names like my_form, my_data, ..
– I haven’t yet checked if the Excel DB… functions are working but I need to add additional functions of mine, that will dig into my datawarehouse. Any recommendations, method or model and location to insert them appropriately ?
– Finally, is there a wizzerd to help stupid user to build correct formula ?
Thanks !
using jquery 1.11.2 and calx 2.0.5
- ikhsan February 12, 2015 at 8:40 am - Reply
  Hi CaptainMad,
  – You definitely can name your form element anything, the A1 thing only needed on the data-cell attribute, you can safely use something like this
  <input type="text" name="something" data-cell="A1" />
  – you can add a separate script and load it after calx, in that script, you can register your own function
  var override = false; $().calx('registerFunction', 'FNAME', function(arg1, arg2){ /** do your stuff here */ }, override);
  – Currently no wizard or something like it, but I am planning to build some calculator builder so user can just drag and drop to build the calculator
  regards,
  Ikhsan
MikeG February 9, 2015 at 1:12 am - Reply
Hello, is the following code all that is needed to make the calculations work? It’s not working for me and i’m not sure why. Can you enlighten me?
Item :
Price :
Qty :
Disc. :
Total :
$(‘#itemlist’).calx();
- ikhsan February 9, 2015 at 4:26 am - Reply
  Hi Mike,
  could you please re-add the code using crayon button?
  regards,
  Ikhsan
  - MikeG February 9, 2015 at 6:05 am - Reply
    Yes sorry,
    You just need the include the calx script and thats it right? Can you enlighten me on why it may not be working??
    <head><script type="text/javascript" src="js/jquery-calx-2.0.0.min.js"></script></head> <body> <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> </form> <script type="text/javascript"> $('#itemlist').calx(); </script> </body>
    - ikhsan February 9, 2015 at 9:53 am - Reply
      Hi Mike,
      jQuery calx is a jquery plugin, so you need to include jQuery first, and include numeral.js if you need number formatting, also it seems you are using jQuery calx 2.x, please read the doc about jQuery calx 2.x since it slightly different with the 1.x version
      regards
      Ikhsan
Norman January 4, 2015 at 10:43 pm - Reply
Great Tool!
Is there a way to run this in WordPress?
best regards from Germany
Norman
- ikhsan January 5, 2015 at 6:00 am - Reply
  Hi Norman,
  Thanks 🙂
  We are in progress on creating wordpress plugin for building and managing calculator form on wordpress site,
  it will be ready for around next one or two months
  Best regards,
  Ikhsan
Chuppa October 31, 2014 at 5:40 pm - Reply
Hello,
is it possible to add an input number or input tel for mobile and tablet compatibility???
Thanks in advance
- ikhsan November 3, 2014 at 3:36 pm - Reply
  Hi Chuppa,
  unfortunately, I don’t have any mobile device for test, but it should be possible to do.
  regards
  Ikhsan
Ayman Qaidi October 21, 2014 at 8:26 pm - Reply
also can you tell me how i calculate price with vat ex: 20%
- ikhsan November 3, 2014 at 3:37 pm - Reply
  Hi, Ayman,
  just use data-format=”0 %”, and it should works
  regards
  Ikhsan
Ayman Qaidi October 21, 2014 at 8:17 pm - Reply
You Are Awsome and thank you very much for this easy jquery plugin
but where i can define or replace $ with £
- ikhsan November 3, 2014 at 3:38 pm - Reply
  You can use the language method for registering new language, you can find the doc here http://www.xsanisty.com/project/calx/configure/
jewel September 3, 2014 at 9:27 pm - Reply
Hi ikhsan,
I need to use multi form in a page. Just I need 3 calculation form with different item and price value. I’m able to edit item and value. but it doesn’t work. No calculation result showing column-2 and column-3 (in my page). Please suggest me how can I fix it.
Regards,
Jewel
Martial July 25, 2014 at 6:44 am - Reply
Hi Ikhsan,
Thank you for your work, but in “Defining Language Format” section, how to replace the $ symbol by € symbol ?
Thanks !
- ikhsan August 3, 2014 at 5:36 pm - Reply
  Hi Martial,
  you can replace it in symbol section of the language config,
  currency: { symbol: '€' }
  - Martial August 18, 2014 at 2:02 am - Reply
    Very thanks Ikhsan !
Charlie July 24, 2014 at 1:27 am - Reply
I’m surprised I can’t find any instructions on how to reset a calculator form. I know the cheating way is to just location.reload the page, but I’d rather call a reset function.
I have:
$(‘#calx’).calx(‘detach’);
$(“#calx”)[0].reset()
$(“span”).html(“0”);
$(‘#calx’).calx({autocalculate: false});
Which I thought worked, but realizing now that I’m getting “Unable to get property ‘data’ of undefined or null reference” errors. Also the data formats stop working on the text box fields I noticed. Am I missing something simple? Thanks!
- ikhsan August 3, 2014 at 5:39 pm - Reply
  Hi Charlie,
  no need to completely detach calx to reset the form, try something like this
  $('#calx').each(function(){ this.reset(); }).calx('refresh');
  - Charlie December 27, 2014 at 9:28 am - Reply
    I just noticed my question was answered (almost 5 months later). I tried implementing that, and it still has the same problem where the previous values are stuck and the formatting is lost.
    Here’s what I have now since you said don’t use detach:
    $(“#calx”)[0].reset()
    $(“span”).html(“0”);
    $(“#calx”).calx({autocalculate: false});
    $(‘#calx’).each(function(){ this.reset(); }).calx(‘refresh’);
    Here’s an example input I have in place I can’t get the reset button to 0 out. It blanks it out, but then when you place the cursor back on the field the previous value is still stored and displays.
    Nobody else appears to have this “reset” problem I have it appears, so I’m obviously missing something very simple that I need to be doing, because to me it’s a very general function needed on any calculator.
    - ikhsan December 27, 2014 at 10:17 am - Reply
      Hi Charlie, maybe you can try out the version 2 of calx, it has more complete features.
  - Charlie December 27, 2014 at 9:30 am - Reply
    Forgot to include the HTML of one of the fields I can’t figure out how to 0 out:
NearlyCrazy July 16, 2014 at 5:08 pm - Reply
Is String value Concatenation possible with jquery-calx-1.1.9.js library???
- ikhsan August 3, 2014 at 5:42 pm - Reply
  unfortunately it is not supported for this version
- ikhsan December 13, 2014 at 2:49 am - Reply
  Please use version 2 if you need operation with a string, its come with more feature
NearlyCrazy July 16, 2014 at 2:34 pm - Reply
Hi Ikhsan,
I am using 1.1.9 version. Is there any way that I can concatenate two for multiple String values
Like, $Field1+$Field2
Where $Field1.Text = ‘FirstName’ and $Field2.Text = ‘LastName’.
Thanks
- ikhsan July 16, 2014 at 5:17 pm - Reply
  Hi Shakya,
  I am sorry, but string value is not supported yet on calx 1.1.9
  It will be supported in version 2.0, but the development get stuck because I have to focus on clients project
  regards
  Ikhsan
Prabal June 6, 2014 at 4:00 pm - Reply
how to calculate (4+5)*(2+3*5)/100
- ikhsan June 7, 2014 at 5:45 pm - Reply
  Hi Prabal, You can do it using vanilla javascript surely, or you can just write it in data-formula attribute
Tomas June 2, 2014 at 2:28 am - Reply
Sorry, I am posting my code again with encoded html tags…
Hello everybody.
I am implementing a calculation form where I want to use
<select id=”y” name=”x”>
<option value=”db_id | param2_number | param3_number”>Item A</option>
<option value=”db_id | param2_number | param3_number”>Item B</option>
</select>
In the end I want to calculate a formula where I need both param2_number AND param3_number value.
How can I get the param2 and param3 value to the form ? I need something like $y[1]*$y[2]
Is it possible? I will apriciate any help.
Best regards,
Tom
- ikhsan June 2, 2014 at 6:43 pm - Reply
  Hi Tom,
  I am sorry, but multiple select is not supported yet for now
  regards
  Ikhsan
  - Tomas June 2, 2014 at 7:58 pm - Reply
    Hello,
    thanks for your answer.
    I figeured out a solution where I checking the combo selection with other formula where I have
    IF(selected=12, price is 5, else IF(…)) and it works
    So for param1 a have this kind of formula and for param2 the same.
    Nice project. I hope it will be in version 2. Than I will check your Donate button 🙂 if you have.
    I could not find it.
    Tom
Tomas June 2, 2014 at 2:24 am - Reply
Hello everybody.
I am implementing a calculation form where I want to use
Item A
Item B
In the end I want to calculate a formula where I need both param2_number AND param3_number value.
How can I get the param2 and param3 value to the form ? I need something like $y[1]*$y[2]
Is it possible? I will apriciate any help.
Best regards,
Tom
Aruna June 1, 2014 at 8:57 pm - Reply
Hi,
I tried to use AVG in dynamic html and it is not working as expected. My code is as below:
Calx with simple aggregate function
var currentRow = 3;
$(document).ready(function(){
$(‘#calx’).calx();
$(‘#add_item’).click(function(){
var $calx = $(‘#calx’);
currentRow++;
$calx.append(‘\
\
\
\
‘);
//update total formula
$(‘#F1’).attr(‘data-formula’,’SUM($C1,$C’+currentRow+’)’);
$(‘#G1’).attr(‘data-formula’,’AVG($B1,$B’+currentRow+’)’);
$calx.calx(‘refresh’);
});
$(‘#calx’).on(‘click’, ‘.btn-remove’, function(){
$(this).parent().parent().remove();
$(‘#calx’).calx(‘refresh’);
});
});
td{
padding:5px 10px;
border:solid 1px black;
}
th td{
background: #ddd;
}
input[type=”text”]{
width:100%;
}
Share Amount
Price
Total Share Amount :
Total Avg Price :
When I remove add three values in price filed, it works correctly but when I remove a row, the AVG function is not calculating properly. Can you please, please advise.
Regards,
- ikhsan June 2, 2014 at 6:45 pm - Reply
  Hi Aruna,
  will try to reproduce the issue here,
  regards
  Ikhsan
David May 10, 2014 at 10:13 pm - Reply
Hi, I complete my question
The code doesn’t appear !
\
Pièce
Mètre
tube
barre
Buy
David
David May 10, 2014 at 10:11 pm - Reply
Hi and thanks for your great job !
I got a problem with the dynamic form, when I want to add select field. I got a error (SyntaxError: unterminated string literal) on the previous ligne (C ligne) and I can’t solve it.
`\
Pièce
Mètre
tube
barre
`
It works correctly with the three first line (freeze fields).
Is there a error in my code ?
Thanks
David (France)
NearlyCrazy April 17, 2014 at 4:20 pm - Reply
My form fieldid contains ‘-‘ like id=”Field-1″, “Field-2”. And its give me some issue while using calx plugin.
When page is loaded all field value is set to zero. and field with data-formula automatically gets some negative value.
.. Any Solutions ??
saad April 7, 2014 at 1:01 pm - Reply
Hi
Great job with the plugin but how cani copy a list with dynamic data in the above example
http://prototype.xsanisty.com/calx/sample/calx_with_dynamic_form.html