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

<script src="jquery-calx-1.1.9.min.js"></script>

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:

<form id="itemlist">
  Item  : <input type="text" id="A1" value="HDD Baracuda Black 2TB" /><br>
  Price : <input type="text" id="B1" data-format="$ 0,0[.]00" /><br>
  Qty   : <input type="text" id="C1" data-format="0" /><br>
  Disc. : <input type="text" id="D1" data-format="0[.]00 %" /><br>
  Total : <input type="text" id="E1" data-formula="($B1*$C1)*(1-$D1)" /><br>
</form>

 

Writing JavaScript Section

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

$(document).ready(function(){
     $('#itemlist').calx(); 
});

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