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

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

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 🙂



158 Comments

  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

      formula snapshot

      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

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

    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

  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

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

      – 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,

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

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

    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

  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,

        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

  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;
    $(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

  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

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

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

Leave A Comment