Initializing Calx2017-05-17T19:56:57+00:00

Initializing jQuery-Calx is easy, no need to write complex configuration script to make your calculation form or calculation table work as expected. The only thing you need to do is write your HTML structure, define each id attribute for it, and define data-formula for the element where the calculation result want to be placed, then Calx will do the rest.

Include the script

The first step, of course, include the script after jQuery

Build HTML Structure

The latest update of Calx was designed to work on any HTML element, not just form element as previous alpha version and will only affect element that involved in the formula. Each element must have an ID attribute in order to be listed in the Calx cells reference and will be used when define a calculation formula.

Defining Element’s ID Attribute

Actually, you can define any id for the element, but for specific function that use range of cells as it’s parameters such as MAX, MIN, AVG, and SUM, you need to define id that mimic Excel cell index like A1,A2,B1,B2 and so on.

Defining data-format attribute

Data-format attribute is used to format numerical value to be more readable, currency symbol, ordinal number, and percentage. Default format used when no data-format attribute found is 0

[.]00, a plain number with optional 2 digits decimal after it. For detailed documentation about formatting, please refer to ‘Formatting Number using Calx‘ page.

Defining data-formula attribute

Data-formula attribute is used to define the calculation formula, define it only on element which is used as placeholder for the calculation result. To refer to other elements inside the form or container, use a dollar sign concatenated with element id [$ID], combined with operators and functions. For more detailed documentation about defining the formula, please refer to ‘Using Formula with Calx‘ page. Sample HTML structure to be used with Calx:


Writing JavaScript Section

When the HTML structure is ready, apply Calx like any other jquery plugin

You may configure Calx to act as you want, for detailed documentation on how to configure Calx, please refer to ‘Configuring Calx‘ page


  1. loredana August 21, 2015 at 5:35 pm - Reply

    Hi, is there any way to use this in an wordpress website, i can’t find a plug in similar for my wordpress site ant this is exacly wat i need. Thank you.

    • ikhsan August 21, 2015 at 5:46 pm - Reply

      Hi Loredana,

      actually, you can use it on anywhere, but you will need some effort to integrate it to wordpress.

      We are currently building the plugin for wordpress, but the development has been paused due to our priority on another project for now.

      If you are interested, the current prototype of calculation form builder that will be integrated to wordpress can be accessed here

      best regards,

      • loredana August 21, 2015 at 7:29 pm - Reply

        Wow, you are quick to respond… Thanks. I do not know how to integrate it but I am quick learner so if you can show me an example ill be much great full… also when you think the wordpress plug in will be ready?!
        Kind regards, Lora

  2. Eric June 30, 2015 at 2:43 am - Reply

    Hi, this is wonderful, but I’m wondering.. Is it possible to have two values in a select option and make separate calculations with them? For example This thing with a number and price… So later we can use both weight and price separately… Did that make any sense at all? 😀

    • ikhsan June 30, 2015 at 4:21 am - Reply

      Hi Eric,

      Maybe you can use some separator between those two values, e.g weight|price, and register a function to get the value.


  3. Neil January 26, 2015 at 11:38 pm - Reply

    Hi, this might sound stupid but I’m going crazy trying to figure this out.. everything works when I run it locally including the samples but when I put it in my server nothing works. What am I doing wrong.. please help

    • ikhsan January 27, 2015 at 4:27 am - Reply

      Hi Neil,

      Maybe you are using the sample version of jQuery calx, please replace with the release version.


    • Milko January 30, 2015 at 6:16 am - Reply

      I have the same problem, tried replacing the sample calx with the Released version. Yet no improvement.

      • ikhsan January 30, 2015 at 6:57 am - Reply

        please make sure to include the other required script, like jquery, numeral.js, etc


  4. RAFAT November 10, 2014 at 3:12 pm - Reply

    when i am simple add operation

    error is displaying TypeError: a.cells[b] is undefined

    plz help

    rafat khan

    • ikhsan November 10, 2014 at 3:36 pm - Reply

      Hi Rafat,

      do you use Calx 2? can I see the sample so I can reproduce it on my local machine?


  5. AgentSmith June 25, 2014 at 4:56 am - Reply

    hey, was wondering if this library is compatible with CodeIgniter 2.1.4 would love to work with it on my new project! thanks

    • ikhsan June 25, 2014 at 5:05 am - Reply

      This is jQuery plugin, independent from any PHP or other backend framework, so it could be used with codeigniter

  6. Gustavo May 22, 2014 at 3:27 am - Reply

    How should I proceed if I need to use many forms in a single page?

    • ikhsan May 22, 2014 at 8:12 am - Reply

      If you want multiple form connected in single calx instance, then just init it’s container

      <div id="container">
         <form id="f1"><!-- ... --></form>
         <form id="f2"><!-- ... --></form>
         <form id="f3"><!-- ... --></form>

      then you can just write the script like this


  7. PK January 22, 2014 at 7:28 am - Reply

    Please fix the include script<script scr=should be<script src=

Leave A Comment