View on GitHub

Calx

Simple jQuery plugin for building calculation form

Download this project as a .zip file Download this project as a tar.gz file

Overview

jQuery Calx is simple jQuery plugin for building javascript based calculation form. This is the initial release, so there is still lack of features and still changed recently. In the core of jQuery Calx, it uses standard calculator jison parser

http://zaach.github.com/jison/try/ which is generated using standard jison calculator grammar. But you can extend the parser to use your own parser (this feature still in dev)

Documentation

Since this plugin is still under intensive development, the documentation is very limited

HTML Structure

Firstly, of course you need to build the form structure, its simple enough to make the calculation form work

<form id="calx">
    Price :<br />
    <input type="text" id="price" value="29.5" data-format="format:currency;decimal:2;prefix:$ " /><br />
    Qty :<br />
    <input type="text" id="qty" value="4" /><br />
    Discount :<br />
    <input type="text" id="discount" value="15" data-format="format:percent;decimal:2;suffix: %" /><br />
    Total :<br />
    <input type="text" id="total" data-formula="($price*$qty)*(1-$discount)" data-format="format:currency;decimal:2;prefix:$ " /><br />
    </form>

CSS Classes

Css classew is optional, you can define class for readonly, writeable, and absolute type of input field. Below is the sample input classes

input.writeable{
    background:#ffffcc;
}
input.readonly{
    background:#f8f8f8;
}
input.absolute{
    color:red;
}

Javascript Section

Finally, after building the HTML structure and CSS rule, you can apply the calculator by simply type

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

That's all, now your calculation form should work.