Calx Method2017-05-17T19:56:55+00:00

Calx comes with several method member which can be called to perform specific action. Except the ‘language’ and ‘parser’ method, each Calx method should be called after Calx is initialized:


update method is used to display the calculation result when the autocalculate is disabled. This method will be useful when you don’t want Calx to display calculation result immediately after the form element has been changed by user. 


language method is used to register new language settings, for detailed documentation about language settings, please refer to ‘Configuring Calx‘ page


parser method is used to replace internal parser with your own parser


refresh method is used to re-scan the form to find newly added element. This method will be useful when your form is dynamic by adding more element to the DOM on the fly or updating data-formula by script.


detach method is used to detach calx from the current form, disable any change event, and destroy all internal data.


  1. Jim September 9, 2014 at 4:45 am - Reply

    I’ve got a form where based on a check box I want to disable a calculation field and then if unchecked, enable the field. I’m using JQuery to remove/add the data-formula attribute, detatching Calx, then reinitializig and refreshing. It appears to be working fine however when the data-formula is removed, I’m getting the following error in my console:
    Uncaught TypeError: Cannot read property ‘data’ of undefined

    Is there a better way of removing a calculating field and refreshing or is this how you would recommend doing it? I can throw an example up and PM you the URL if needed. Thanks!


  2. Dale July 19, 2014 at 2:22 am - Reply

    Hi, I’m trying to create a time based counter that updates calculated values every second.

    I have a hidden form field (seconds_of_operation) upon which many of my counters relies. I can successfully update that input every second inside a setInterval function, but I can not get the calculations based off that input to update.

    • ikhsan July 19, 2014 at 2:50 am - Reply

      Hi Dale,

      try to trigger change event after setting the value of the field


  3. Raghupathy May 28, 2014 at 9:48 pm - Reply

    How to use this script to call the SharePoint list field for calculation.


    • ikhsan May 28, 2014 at 10:08 pm - Reply

      Hi Raghu,

      I am sorry, but I don’t have any experience with SharePoint


  4. Gustavo May 24, 2014 at 8:03 pm - Reply

    I have two input fields that I need to dynamically change “data-formula” attribute. I’m doing this using “detach” method, then, I change “data-formula” and then I initialize .calx() again. Everything seems to be ok, but I’ve noticed that “data-format” attribute stops to work when I re-initialize calx. How should I proceed to keep “data-format” working?

    • ikhsan May 25, 2014 at 6:41 am - Reply

      Hi Gustavo,

      try to use ‘refresh’ instead of ‘detach’ after changing data-formula



      • Gustavo May 26, 2014 at 11:53 pm - Reply

        Thanks for your help. This is a great plugin!!

  5. Philippe Champeau July 18, 2013 at 8:34 pm - Reply


    It seems that the method detach or refresh don’t work properly : I want to delete programmatically the formula from an input, so that the input becomes a “free” input.
    I tried :
    but it doesn’t work, the formula still fires
    I tried also
    but it doen’t work (plus extra error messages when using the matrix after)

    Any idea ?

    Thanks in advance

    • Philippe Champeau July 22, 2013 at 4:07 pm - Reply


      I’ve discovered what was wrong in the “detach” method :
      1. the syntax unbind(‘bur,focus,…’) doesn’t work with my version of jquery. Using unbind(‘blur’).unbind(‘focus’)…. instead works fine.
      This syntax was called in the method scan (line 2811) and in the method detach (line 3010)
      2. the attribute readonly (and the class readonly) that have been added in the scan method are not removed in the detach method.
      3. the test $el.prop(‘tagName’) == ‘input’ fails if the tagName is “INPUT” ; better use $el.prop(‘tagName’).toLowerCase()

      A suggestion : the class “readonly” might be named “calx_readonly” or something like that, for it may conflict (it was the case in my application) with some existaing css

      Apart from that, thank you for your plugging ; it’s very nice.
      Thank you too for your patience….

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

        Hi Philippe,

        Thanks for pointing this out, will update the code soon.

        Sorry for late update, a bit overloaded with another task


Leave A Comment