# jQuery Calx – The jQuery Calculation Plugin

Home/Project/jQuery Calx – The jQuery Calculation Plugin
jQuery Calx – The jQuery Calculation Plugin 2017-05-17T19:57:02+00:00

## 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.

## 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 🙂

1. 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

2. 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!

3. 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

4. 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

5. 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.

6. 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

7. 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

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

if i can use control id data-cell=”A11″

• ikhsan February 25, 2015 at 8:55 pm - Reply

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

9. 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

10. 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

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

– 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

– you can add a separate script and load it after calx, in that script, you can register your own function

– 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

12. 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,

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??

• 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

13. 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

14. 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???

• 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

15. 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

16. 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 £

17. 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

18. 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,

• Martial August 18, 2014 at 2:02 am - Reply

Very thanks Ikhsan !

19. 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

• 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:

20. 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

21. 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

22. 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

23. 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,

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

24. 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

25. 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;
\$(‘#calx’).calx();

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{
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

26. 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

David

27. 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)

28. 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 ??