jQuery Calx – The jQuery Calculation Plugin

//jQuery Calx – The jQuery Calculation Plugin
jQuery Calx – The jQuery Calculation Plugin2017-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. Bewndock March 30, 2014 at 4:52 pm - Reply

    Thank you for this useful library – been using it in a production environment with no problems so far.

    I’ve had some user requests which I’m struggling a little bit with, hoping someone could provide possible solutions. I’m using version 1.1.4 at the moment, thinking about updating to 1.1.9.

    1. zeroFormat – if a textbox value is zero then the value must be ‘0’ or ‘0.00’ depending on the format. So if data-format=”0,0″ value must be ‘0’, and if data-format=”0,0.00″ value must be ‘0.00’. Also, if the result of a formula is blank, the value must be ” and not the set zeroFormat. To get around some of this, I set zeroFormat to ‘0’ and made the following changes to jquery-calx-1.1.4.js: http://jsbin.com/xutiwuye/1/edit. This almost solved the problem but when a value is zero (not blank) it uses the static zeroFormat value of ‘0’ instead of using the textbox’s data-format. How can I fix this?

    2. Overriding data-formula textboxes – I need a way for the user to be able to input directly into a data-formula textbox. I’ve set ‘readonly: false’ but any changes aren’t being triggered/saved. A bonus would be if the textboxes that make up the formula could be set to blank if a value is entered into the data-formula textbox, and vice versa.

    3. Setting required fields for a data-formula textbox – I need a way to have the calculation happen only if _all_ textboxes that make up the formula have values. So if data-formula=”($el1+$el2)”, both $el1 and $el2 need to have values before the calculation happens. Is this possible?

    Any help would be hugely appreciated! In the mean time I will keep trying and if I come up with a solution I will post it. Thanks and cheers

     

    0,0

    • Bewndock April 2, 2014 at 8:30 pm - Reply

      (Excuse the poor formatting of my post above).

      I managed to solve issue #3 by using a hidden textbox “” and in the formula using the IF logical operator to say “IF $el $elEmpty” etc. So just the first two issues I’m still trying to solve.

  2. SAAd March 26, 2014 at 9:07 pm - Reply

    hello sir i want to add list menu some thing like this

    <td><SELECT name=”items[]” id=”A1″>
    <?php
    $sql4=mysql_query(“SELECT * FROM items WHERE Company_idCompany=’$id_int'”);
    while($row4=mysql_fetch_array($sql4))
    {
    $name_item=$row4[“name”];
    $id_item=$row4[“idItems”];

    ?>
    <option value=”<?php echo $id_item;?>”><?php echo $name_item;?></option>
    <?php
    }
    ?>
    </SELECT> </td>

    intoΒ http://prototype.xsanisty.com/calx/sample/calx_with_dynamic_form.html

    Its copying the list but with php code into it the whole plugin just crashes or some thing

  3. saurabh March 6, 2014 at 6:34 am - Reply

    Thanks for the great plugin ! A few questions though:

    1) Does the plugin support ‘COUNT’ function? If not, any pointers about how to implement the same?

    2) Can aggregate functions take multiple ranges, e.g.Β SUM(L6:L12,L17:L20,J21)

    3) Does the plugin work with zepto.js, instead of jquery?

    • ikhsan March 6, 2014 at 8:40 pm - Reply

      Hi Saurabh,

      1. currently calx doesn’t support it, and a bit difficult to implement to current version of calx since we need to change the grammar of the parser, but next version of calx will use fully rewritten grammar which support for custom function, string, cell-range, etc
      2. next version of calx will do, but I am sorry I can’t give exact release date due to my current workload
      3. I don’t test it with zepto, but, in internal of calx, it only use few jQuery specific method (event-delegation, each, attr)

      regards
      Ikhsan

  4. Valamount January 27, 2014 at 5:40 pm - Reply

    Hi,Great module! When you released 1.2.0 version with string support in “IF” ?Regards

    • ikhsan February 10, 2014 at 10:10 am - Reply

      Hi Valamount,

      I am sorry, but currently overloaded with my client’s project

      will try to work on it on my spare time πŸ™‚

  5. budi January 22, 2014 at 11:02 pm - Reply

    Thank’s a lot for great plugin, you gave me a simple way for doing my project.

  6. Sana December 21, 2013 at 3:49 am - Reply

    Hey ikhsan ,

    I am using your plugin to develop a excel like html table for a web application , i wanted to apply the sum formula on the columns , but the syntax says we need to have only alphabets as collumn id’s like $A + $B + $C . But for me i am going to have > 1000 rows and >25 columns which generate dynamically. So can you tell me how i can handle this using your plugin.
    Now i used the formula as if row ==1 { $A1+$A2+$A3 } if row == 2 { $B1+$B2+$B3 } and so on..

    -Sana

    • ikhsan December 21, 2013 at 4:53 am - Reply

      Hi Sana, you can simply use SUM($A1, $Y1000)

      Regards
      Ikhsan

      • Sana December 22, 2013 at 8:18 am - Reply

        Hey Ikhsan ,

        Thank you so much for the reply . Plugin works gr8 ! Let me try and get back if i have any doubts.
        Thank you once again.

        -Sana

      • Sana December 22, 2013 at 8:36 am - Reply

        Just a quick question , what if i have more than 26 columns , we have only 26 alphabets right .. help me to understand how i can use this.

        • ikhsan December 22, 2013 at 10:46 am - Reply

          Hi Sana,

          Glad to hear it works, you can just write like excel does, you can write it like $AA1, $AZ53 and so on

          Regards
          Ikhsan

          • ks December 27, 2013 at 7:57 am

            IF($A >0 , ERROR , PERFECT) i would like to print strings if the condition works , how can I do this using your plugin. I think the syntax is only allowing numeric in place of “true” , “false” .
            Please suggest.

          • ikhsan December 27, 2013 at 8:18 am

            Hi ks,

            Currently it only support numeric value, ver. 1.2.0 will support string value as well, also support more function.

            It will be released in about later next month

            Regards
            Ikhsan

          • ks January 8, 2014 at 12:58 am

            what kind of event will be triggered after applying the formula IF($B >0,1,2). I am trying to catch the event fired during the auto calculations.

            Thanks,
            KS

          • ikhsan January 8, 2014 at 11:28 am

            Hi ks,

            currently on 1.1.9 no custom event will be triggered on calculation, but if you don’t mind you can grab the latest development state on github.

            you can trigger event on calculation by add onupdate listener

            $('#form').calx({
            onupdate : function(data){ /** do your stuff here */ }
            });

            data will be an object containing all cell with it’s unformatted value, e.g data.A1 = 5.9384

          • ks January 8, 2014 at 10:22 pm

            Ikshan ,

            Thanks for the reply , I downloaded the latest version from the Github. I actually have to do this IF($A <0 , ERROR, PERFECT) since strings are not accepted , I need to get the values of 1 , 2 when changed and replace them with strings. Any idea on how I can achieve this using your plugin .

            Thanks,
            ks.

          • ikhsan January 9, 2014 at 7:00 am

            ks,

            you can simply write


            $('#form').calx({
                onupdate: function(data){
                    if(data.A < 0){             $('#target').html('error');         }else{             $('#target').html('perfect');         }     } });

          • ks January 9, 2014 at 11:32 pm

            I tried but no luck ; I am applying calx on a table in which if column W < 0 , then error / perfect value should be displayed on column X . Please help πŸ™

            $('#tabletable').calx({
            onupdate: function(data){
            if(data.W < 0){
            $('#X').html('error');
            }else{
            $('#X').html('perfect');
            }
            }
            });

  7. esmic October 30, 2013 at 10:56 pm - Reply

    Hey can I define an array for each option in a select list

    then output it to a table for instance

    • ikhsan October 31, 2013 at 7:46 pm - Reply

      Hi Esmic,
      Sorry, but currently calx doesn’t have such feature, but you can still combine normal jquery script with calx

      regards
      Ikhsan

  8. Ramesh October 24, 2013 at 7:27 pm - Reply

    HI ikhsan, Your plugin is great!
    while using this plugin, I found that it has no support for AND(&&), OR(||), NOT(!) operators which are mostly used in excel calculations for checking conditions.
    ex: IF(AND(C21>5,C21<40),C21,0)
    ex: IF(5<C21 && C21<40),C21,0)
    Please make these available in your next version update..Hoping So..!!
    Thank You..!!

    • ikhsan October 27, 2013 at 11:17 am - Reply

      Hi Ramesh,

      Just push new release to github repo, added AND and OR operator , while NOT is not implemented yet

      you can use AND and OR operator by write the formula like

      data-formula=”IF($A = 0 AND $B = 0, $C, $D)”
      data-formula=”IF($A = 0 OR $B = 0, $C, $D)”

      regards
      Ikhsan

  9. Mat October 24, 2013 at 5:12 pm - Reply

    Hi Ikhsan,
    thanks for your fast reply!
    Any plans to change this in the future? Because it’s a bit odd to tell the user to use a “foreign” input format.
    Thanks
    Mat

    • ikhsan October 24, 2013 at 6:46 pm - Reply

      Yes, maybe in near future or the next release

      Should not too hard to implement

      Regards
      Ikhsan

  10. Mat October 24, 2013 at 2:53 pm - Reply

    Hi,
    great package! But i encounter the following problem. I initialize Calx with the language feature to switch to german formats. So i set the delimiters to thousands: ‘.’ and decimal: ‘,’.
    When i enter for example 3,2 in a textbox and switch the focus to another form field there is a ‘0’ in the textbox. When focussing the textbox again the ‘3,2’ reappears.
    When i instead use the default delimiter and input 3.2 after loosing focus the textbox displays ‘3,2’. So is the language feature just for the output formatting of numbers?
    What am i doing wrong?

    Thanks!

    • ikhsan October 24, 2013 at 4:45 pm - Reply

      Hi Mat,

      Unfortunately, language feature only work for formatting the output in current version, while input must use valid unformatted number to be recognized by calx

      Regards
      Ikhsan

  11. Joko October 9, 2013 at 9:22 pm - Reply

    Hi Ikhsan, first of all, i want to thank you as everyone here does for your great plugin and effort.
    I have minor request here and that would be very nice if you can do it or give me an advise how to done it πŸ™‚
    I noticed for every fields that have data-formula attribute will automatically have readonly attribute, case here is I want my users still able to change the value after the calculation done.
    thanks.. πŸ™‚

  12. Giorgio October 1, 2013 at 3:28 am - Reply

    Hi, Ikhsan, I’ve a little problem : on my project, I cimpile the sheet with formulas etc from a db, and all the needed cells are input fields with all the attribute data-formula and data-format.
    Then, if a cell is filled by user that input field have data-formula=”” (empty string). till now i can’t avoid to insert the data-formula attribute so i get the following error:
    I’m trying to use the percent format and in my cells with this format, when I insert 10 I get 0.10 % and with the new method value I can see that the value is 0.001 but i expect 0.1.
    I’ve tried your sample calx_custom_language.html and work ok, but If I modify the code adding data-formula=”” to the disc(s) cells i get the same wrong behaviour.
    thanks

  13. Giorgio September 25, 2013 at 8:45 pm - Reply

    I want to thank you very much for the work done, now everything works as i wanted.

    I was sad that at this time I did not have time to devote to the code to help you solve the problems I encountered.

    Thanks

    Giorgio

    • ikhsan September 25, 2013 at 8:53 pm - Reply

      No problem,

      and, You are welcome πŸ™‚

  14. Giorgio September 25, 2013 at 1:56 am - Reply

    Hi, this great plugin make the difference….
    there’s a way to bring the result of a calculation before the formatting? maybe a special data parameter of the field?
    thanks for answer

    • ikhsan September 25, 2013 at 8:59 am - Reply

      Hi Giorgio,

      Just pushed new version, you can retrieve the value using this method

      $(‘#calx’).calx(‘value’); //to retrieve value of all registered cells
      $(‘#calx’).calx(‘value’, ‘A1’) //to retrieve value of specified cell

      regards
      Ikhsan

      • Giorgio September 25, 2013 at 3:27 pm - Reply

        Many many thanks for your efforts!
        I tried the new version 1.1.8 with and i have some problems: the new version, against the 1.1.4, don’t complete the sheet calcs.
        And more, in the output of the new calx(‘value’) method i saw that some var, specially that i can manually input from fields, are left as string an not converted to number as expected.
        http://tinypic.com/r/33f7rky/5
        The image is my project page where i use calx, with firebug opened and show the calx(‘value’) of my form
        G.

        • Giorgio September 25, 2013 at 4:36 pm - Reply

          hi, I was too fast, hasty, in my prec post! my js code not changed well for the new calx method, some old code was executed so broke the sheet calcs.
          Only one thing I’ve : in may calx table, I set the $A1,$B1 and $C1 fields via jquery with a simple val assignement, as $(‘#A1’).val(price); and after i recall a $(‘#calx’).calx() to update the sheet calcs.
          in this manner I lost the format of those fields. only show numeri value, not so was with 1.1.4

          another thing: with 1.1.8 the example calx-1.1.8/sample/calx_with_html_element.html
          give an error TypeError: calx.matrix[$formkey] is undefined
          if you play with the buttons

          • ikhsan September 25, 2013 at 5:32 pm

            Hi Giorgio,

            to set the field value via script, you need to trigger change or blur event manually (when form already initialized by calx)
            $(‘form’).calx();
            $(‘#A1’).val(price).trigger(‘change’);

            unfortunately, if #A1 is an html element other than form element, calx still can not handle it
            regarding to the sample, there was a bug in detach method, just push the fix to github (master branch, not in 1.1.8 tag)

            regards
            Ikhsan

  15. Giorgio September 24, 2013 at 11:44 pm - Reply

    Hi, i’m trying to use this great plugin on my project.
    I give the possibility to the user to personalize the formulas for calculations and then i put into the database both formulas and results! And all is’ok if I don’t use the formats!

    I began to use the data-format property and i lost the numerical value of the fields, i can get only the formatted string. Eg for currency value i get ‘$ 1.300,00″ but i would like to capture 1300.0
    Eg for percentage i get “10.0 %” but i would like to get 0.1
    I’ve ttried with calx(‘detach’) , as used in your calx_with_html_element.html example,
    before sending the form, but nothing changed.

    How i can get the numerical value?
    I know that the value of an input field obtained from the value property is always a string, so with numerical value I mean the string number without format.
    Thank’s for help
    Giorgio

    • ikhsan September 25, 2013 at 5:45 am - Reply

      Hi Giorgio,

      I am facing the same case here, and never thought about it before :D, I will create new method member,
      maybe we can call it by $(‘#calx’).calx(‘serialize’) to get the serialized value;

      Just FYI, currently still writing the version 2 branch, which will support more feature πŸ™‚

      Regards
      Ikhsan

  16. Marcel September 24, 2013 at 10:01 pm - Reply

    Hi found a work around CEIL(3575/100) * 100 thanks

  17. John September 20, 2013 at 8:47 pm - Reply

    Hi, firstly great plugin, very useful….

    However…. I would like to use your plugin to calculate a total and then I want to submit the form to enter the details into a database and send via email….

    The problem I have is with the select/option part, as I need to complete the value parameter with the sum required for the formula when I submit the form and retrieve the data it only retrieves the value field…

    Normally I would just add a description in the value field and then split the result but I don’t know how / if its possible to do that with your plugin?

    Can I add in a name / label field on to the specific option field so I know which option has been selected? Or is that not possible?

    many thanks
    John

    • John September 20, 2013 at 9:11 pm - Reply

      Sometimes the answer is staring you in the face…It seems if I had spent an extra 5 min playing around I wouldn’t have needed to ask…. I have a solution that kind of works, well it will do me for now unless you have any other solutions…

      If I add some text into the value before the number it accepts it and doesn’t interfere with the calculations…

      I.e:

      — please select one —
      Option A
      Option B
      Option C

      seems to work for now anyway!

  18. Karina September 19, 2013 at 10:36 pm - Reply

    Hi!

    Your plugin is great! I’m having an issue in IE. When I try to modify a value, the cursor goes all the way to the left instead of staying on the right and be able to delete the info. Also, when I hit enter, the values does not update automatically, you have to change of field so you can see the update. Any idea why is this happening? As I mentioned before, this only happens in IE, I tested in Firefox and Chrome and works fine.

    Thanks a lot for you help!

  19. Marcel September 19, 2013 at 3:37 pm - Reply

    hi i need help here

    need to simulate excel type ROUNDUP (value,-2) this rounds up to the nearest 100 ex. 3575 = 3600

    can someone help please

    • ikhsan September 20, 2013 at 11:19 pm - Reply

      Hi Marcel,

      I am in progress rewriting this plugin to support lot more formula also user defined formula

      Best regards
      Ikhsan

  20. Marcel September 19, 2013 at 2:41 pm - Reply

    hi i need help

    i have to round off like in excel ROUNDUP(value, -2) rounds upto nearest 100 example 3575 = 3600

    can someone help thanks ive tried CEIL and ROUND πŸ™
    cant figure it out

  21. Karina September 13, 2013 at 10:04 pm - Reply

    Hi!

    I’m having issues with IE8 and IE9. When I try to modify an input, the cursor goes all the way to the left, instead of staying on the right and be able to delete the value. Also, if I hit enter so the info updates according to the value I changed, it doesn’t work, I have to move to another field so I can see the update.

    Any idea why is this happening?

    Thanks in advance! Your plugin is great! πŸ™‚

    • ikhsan September 20, 2013 at 11:23 pm - Reply

      Hi Karina,

      I have no idea why the cursor goes to the left, regarding to the enter issue, will try to fix it πŸ™‚

      regards
      Ikhsan

  22. Matt August 9, 2013 at 3:06 am - Reply

    Is it possible to display text along with a calculated formula total as a result?
    So if one fields total is less than another fields total display another field with something like: Group A savings $10

    • ikhsan August 21, 2013 at 10:44 pm - Reply

      Hi Matt,

      Sorry for late reply, Currently it doesn’t support such feature, but I am working on new version with a lot of change, including functionality to display text and other new feature

      Regards
      Ikhsan

  23. Wally August 7, 2013 at 9:47 am - Reply

    Hi

    I have been using the non-minified version of calx and it works great. However, I just tried using the minified version IE 10 and it does not work. Is there anything I can do to make this work in IE 8+ ?

    Thank you!!!

    Wally

    • Wally August 9, 2013 at 12:12 am - Reply

      I was able to minify it using YUI and choosing to “minify only, no symbol obfuscation” and “preserve unnecessary semicolons”

      Thanks again for all your hard work on this tool.

  24. Sanja August 2, 2013 at 2:27 am - Reply

    Hi,
    First, thank you for this plugin. It’s great !
    Can you help me with implementing something like ‘spinner’ , I try with several , but formula wont work.
    For example : if I have input for quantity , I wont to have possibility with plus and minus buttons.
    Thanks

    • ikhsan August 2, 2013 at 2:46 am - Reply

      Hi Sanja,

      Could you provide which spinner plugin do you use?

      So I can reproduce it locally?

      Regards

  25. Matt July 31, 2013 at 6:07 am - Reply

    Beautiful! I knew I was probably just getting the format wrong. This is a really fantastic plugin. Keep up the great work!

  26. Matt July 31, 2013 at 2:06 am - Reply

    First off, this plugin is awesome.
    I’m wondering if there is a way to have if with multiple conditions?

    data-formula=”IF($D1=1,5,0) ELSE IF($D1=2,20,0) ELSE IF($D1=3,50,0)”

    Thanks

    • ikhsan July 31, 2013 at 4:36 am - Reply

      Thanks Matt!

      you can have multiple condition just like excel does

      data-formula=”IF($D1=1,5,IF($D1=2,20,IF($D1=3,50,0)))”

  27. Wally July 19, 2013 at 6:50 am - Reply

    Hi,

    I have found an interesting bug. I have a field that is sometimes empty or 0 and there is a calculation that uses that field as the divisor. In a simple example I am able to make “Inifinity” show up, but a more complex example it errors out and the debugger has shown me it is line 366 ” if (d.split(‘.’)[1].length) { ”
    It is trying to split “Infinity” so an error “SCRIPT5007: Unable to get property ‘length’ of undefined or null reference ” is thrown and actually the page does not render correctly.

    Let me know if there is a way to work around.

    Thank you again for all your help!

    Wally

    • ikhsan July 22, 2013 at 4:45 pm - Reply

      Hi Wally,

      The zero, empty value and values other than known number (like NaN, infinity, or text value) still be issue for calx.

      Will fix it and it’s formatting issue once I have time, a bit overloaded with some task.

      Sorry for late reply πŸ™‚

      • Wally July 22, 2013 at 11:58 pm - Reply

        Hi,

        Sounds good. Thank you for all your effort on this addin…You have done a fantastic job!

        I look forward to the next release.

        Thank you again!

        Wally

  28. Champeau Philippe July 5, 2013 at 3:56 pm - Reply

    Sorry, another question…
    Please could you confirm me that, whatever the language customization is, the user must use the standard format when he enters a data.,e.g, for a french format, 12345.56 and not 12 345,56

    Thanks in advance

    • ikhsan July 6, 2013 at 7:38 pm - Reply

      Hi Philippe,

      No problem, I think the last update have inconsistency in parsing the input number when custom language applied, will fix it soon

      but if you use the 1.1.4 version, you should type plain number (12345.67) instead of formatted number (12,345.67)

      anyway, thanks for the feedback! πŸ™‚

  29. Wally July 4, 2013 at 1:14 am - Reply

    Hi,

    The new version is great. This plugin is awesome. I noticed something interesting. I have a form with inputs and formulas. If I use Javascript to update the inputs then the formulas do not recognize the new values. For example there are 2 fields. 1 field is an input and the other field is Input 1 * 25. If I use Javascript to add 50 to input 1 and replace the value then calx function actually has an issue. It will at first not calculate and have NaN in there. When I click into the input 1 field and then tab out…the old value will show (prior to adding 50 to it).

    The javascript I have tried is document.inputname.value = newval;

    If you have any suggestions I would appreciate it!

    Thank you!

    Wally

    • Wally July 4, 2013 at 1:29 am - Reply

      Nevermind! I just read your comment above and .trigger(“change) makes it work perfectly.

      Thank you again for all you effort in building this tool.

    • ikhsan July 4, 2013 at 4:54 pm - Reply

      Hi Wally,

      glad to hear that, and, you are welcome πŸ™‚

  30. Champeau Philippe July 1, 2013 at 11:14 pm - Reply

    Thank you for very good work.

    I still have a problem : when I modify programmatically the content of an input, I can’t force the recalculation with calx(‘update’) or calx(‘refresh’)
    The only way i found is to do calx(‘detach’) then calx() (Somme error messages appear but it seems to work)
    Is there a best way ?

    Thanks in advancve

    • ikhsan July 2, 2013 at 4:57 am - Reply

      Hi Philippe, since calx listen on change event, you can do something like this

      $(“#A1”).val(“2000”).trigger(“change”);

      And update calx using calx(“update”) after that

      • Cheri August 13, 2013 at 10:18 pm - Reply

        I recently just finished building a dynamic calculator using your script. It is one terrific code base! But I was too having trouble with dynamically populated values until I saw this comment by you about .trigger(“change”).

        Is it possible to add these kinds of trigger calls to documentation? It’d be very helpful. Thanks again for your work!!

  31. John July 1, 2013 at 6:17 pm - Reply

    I think I can get away with that. Brilliant thank you very much!! πŸ™‚

    John

  32. John June 28, 2013 at 12:14 am - Reply

    Hello, When I enter a number with a comma in it, it resets the number to 0. Is there a way of forcing entries to a certain format like the results can?

    • ikhsan June 28, 2013 at 12:26 am - Reply

      Hi John,

      just type plain number, when the field lost focus, the number will be formatted automatically based on your data-format attribute, please refer to how formatting the number

      • John July 1, 2013 at 5:56 am - Reply

        Thanks for the reply.

        If I type the plain number it reformats it with the comma which is perfect.

        If I type the number with a comma myself then it resets to 0 which isn’t ideal.

        Is there a way around this?

  33. Philippe Spock June 26, 2013 at 1:33 pm - Reply

    I am trying out you plugin. Very nice.
    My problem is that it appears that it doesn’t work with IE7/8. No errors, but it doesn’t work.
    My customer uses IE7/IE8, and it’s not possible to upgrade to IE10 immediately.
    Any idea ?
    Thanks….

    • ikhsan June 26, 2013 at 3:46 pm - Reply

      Hi Philippe,
      I didn’t check it on IE since I don’t have access to it, but will try it on my friend’s PC, will let you know soon

      *edit*
      I just check it on IE8, the problem seems to be on the script tag, type=”application/x-javascript” causing IE not parse the script.

      After change it to “text/javascript”, error shown, and still working on it

    • ikhsan June 28, 2013 at 10:33 pm - Reply

      Hi Philippe,

      just push the last update to ver. 1.1.3, please update your script here https://github.com/ikhsan017/calx/archive/1.1.3.zip

      I just test it on IE 8 and it works as expected, I don’t know how it is on IE 7

      **edit**
      Just test on IE7 and bugs have been fixed, revision pushed to 1.1.4 version, please update your script here https://github.com/ikhsan017/calx/archive/1.1.4.zip

      it should run on both IE7 and IE 8 now

      • Champeau Philippe July 2, 2013 at 6:44 pm - Reply

        Wonderful, it works now perfectly with IE7/8

        Thank you very much

  34. Wally June 19, 2013 at 9:35 am - Reply

    The new release is great! you have built an excellent tool. One thing I noticed that worked in the older release was if the data-format was applied to any field that had it specified (inside of the calx form) whether it was apart of a formula or not. Now if the input is not apart of a formula then the format is not applied.
    I have some historical information in a text field that is read only and have the data-format in it. There are no formulas using it, but I would like it to have the data-format applied. Is there a setting for this ?

    Thank you again!

    Wally

    • ikhsan June 19, 2013 at 9:42 am - Reply

      Hi Wally,
      I think I missed it :D, will be fixed in the next release with some more improvement

      thanks for the feedback

      • Wally June 19, 2013 at 10:03 am - Reply

        Thank you – I am looking forward to it…and again great job on this release!

    • ikhsan June 19, 2013 at 1:52 pm - Reply

      Hi Wally, just pushed the fix to 1.1.2

      you can download the update here https://github.com/ikhsan017/calx/archive/1.1.2.zip

      • Wally June 23, 2013 at 9:50 pm - Reply

        Perfect! Thank you!

  35. RenΓ© May 31, 2013 at 11:32 pm - Reply

    Ikhsan, thanks!! I’ll give it a try!

  36. RenΓ© May 25, 2013 at 4:24 am - Reply

    Hello, thank you for your work! I’m trying to find a way to include simple IF sentence into the formula. In Excel it would look something like this =IF(D1=0;0;D2*D3). Maybe it is already possible?

    • ikhsan May 25, 2013 at 5:19 am - Reply

      Hi RenΓ©,

      Yes, it’s possible on latest version, just write in the data-formula attribute, you may also write complex nested if

      data-formula=”IF($D1=0,0,$D2*$D3)”

      still updating the documentation for the latest version πŸ™‚

  37. Peter May 24, 2013 at 6:03 am - Reply

    I seem to have an issue with input types – button and submit. Their values are being stripped out. Otherwise for me this plugin is working great!

    • ikhsan May 24, 2013 at 8:37 pm - Reply

      Hi Peter, I Just updated the plugin

      just download it here : https://github.com/ikhsan017/calx/

      update on documentation will be written soon, please change the data-format value since it is now using Numeral.JS in it’s core, and refer to http://numeraljs.com/ for data-format documentation

      let see if it affect any button or submit button

  38. adela May 21, 2013 at 5:27 pm - Reply

    Hello, this plugin is amazing, thank you for it!
    I would like to check via html5, if required fields are not empty. Therefore I need empty fields at the beginning, including fields with data-format class.
    Is it possible to have empty field until calculation is applied?

    • ikhsan May 21, 2013 at 6:10 pm - Reply

      Hi Adela,
      Thanks for using my plugin, I am still rewriting it from the scratch and add some new feature to be more stable.

      will upload in approximately this weekend

      *edit
      Just update the plugin to new version, use $(‘#form’).calx({autocalculate:false}) will keep the field blank until it get focused and blured, you need to call $(‘#form’).calx(‘update’) to display the result. maybe still need to polish the latest update

      • adela May 27, 2013 at 7:42 pm - Reply

        Well, it’s not working very well. πŸ™
        What I would like to do is to have a form which calculate values.

        For example I have 3 fields – A + B = C. User don’t have to fill up A and B, therefore I don’t push readonly attribute to the field. User can write C’s value directly.

        Plugin is perfect, but it always pushes 0 as a result, no matter if someone started calculation. Therefore I can’t use html5 required check option.

        Also, what if user want 0 as value?

        I hope I explained well myself.

        • ikhsan May 27, 2013 at 8:13 pm - Reply

          Hi Adela,

          ok I got it, so basically C will still blank if A and B is blank, right?

          will push next release approximately this weekend ;), with some enhancement and new feature,
          anyway, thanks for the feedback πŸ˜‰

          • adela May 28, 2013 at 2:37 pm

            THANK YOU!

  39. Wally April 14, 2013 at 12:24 am - Reply

    Hi – Thank you for building this plugin. It is great. I am just starting to use it and was wondering in your A+B example is it possible to force the calculation of the formula to happen when the page first loads? So in the example it has A = 3 and B = 4. When the page first loads the A+B field is blank. Is it possible to have it do the calculation so 7 shows?

    Thank you!

    • ikhsan April 25, 2013 at 8:27 pm - Reply

      Hi Wally, thank’s for using my plugin, I know this is still far enough from stable.

      You can make it show the result by setting up the value of A and B

      <input type="text" id="A" value="3" />
      <input type="text" id="B" value="4" />

      implementation sample can be found here

      *edit
      Just update the plugin, now calculation will be performed when the calx is initiated

  40. Joanne March 18, 2013 at 11:33 am - Reply

    I am trying out you Calx plugin, but it doesn’t allow me to add text or dates to some of the forms input fields. I want to do calculations only on some of them.

    • ikhsan March 23, 2013 at 6:30 pm - Reply

      Hi Joanne,
      calx will mark the field with data-formula attribute as readonly, it will not affect any other field

      can I see your code or url? πŸ™‚

      • ikhsan May 23, 2013 at 5:56 pm - Reply

        Hi Joanne,

        just push the latest update to github repo, it’s now will not affect any input field which is not required by any formula

Leave A Comment