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
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:
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>
When the HTML structure is ready, apply Calx like any other jquery plugin