This time I will share jQuery Plugin and tutorial about jQuery Plugin For Calculation Form or Calculation Table – Calx, hope it will help you in programming stack.
Calx is an easy-to-use yet powerful jQuery plugin that allows you to create a calculation form or calculation table for your E-commerce website or sale page.
It’s parse provided formula and does calculation based on it, scan the form change and update the result automatically, format plain number into currency format, ordinal number, etc.
jQuery Calx was designed to allow user to easily configure their calculation form or calculation table, you may define as simple as ($A+$B) formula to the complex one such as PMT formula ($I*$P*((1 + $I)^$N)) / (1 – ((1 + $I)^$N)).
Basic Usage:
1. Include jQuery javascript library and jQuery Calx plugin on the page
2 |
< script type = "text/javascript" src = "jquery-calx-1.1.8.min.js" ></ script > |
2. Create a calculation form. Using data-* attributes to define the number format and formlula
06 |
< td >< select name = "proc" id = "proc" > |
07 |
< option value = "15" >1 Core</ option > |
08 |
< option value = "22" >2 Core</ option > |
09 |
< option value = "30" >4 Core</ option > |
14 |
< td >< select name = "ram" id = "ram" > |
15 |
< option value = "5" >1 GB</ option > |
16 |
< option value = "8" >2 GB</ option > |
17 |
< option value = "15" >4 GB</ option > |
18 |
< option value = "25" >8 GB</ option > |
19 |
< option value = "30" >10 GB</ option > |
24 |
< td >< select name = "hdd" id = "hdd" > |
25 |
< option value = "5" >250 GB</ option > |
26 |
< option value = "7" >500 GB</ option > |
27 |
< option value = "12" >750 GB</ option > |
28 |
< option value = "15" >1 TB</ option > |
29 |
< option value = "25" >2 TB</ option > |
33 |
< td >Price per Month :</ td > |
34 |
< td >< span id = "price" data-format = "$ 0,0[.]00" data-formula = "$hdd+$proc+$ram" ></ span > /Month</ td > |
38 |
< td >< input type = "text" id = "contract" data-format = "0" style = "width: 40px" value = "12" /> |
42 |
< td >Total Price :</ td > |
43 |
< td id = "total_price" data-format = "$ 0,0[.]00" data-formula = "$contract*$price" ></ td > |
3. Just call the plugin and you’re done
1 |
< script type = "text/javascript" > |
2 |
$(document).ready(function(){ |
More Examples:
Changelog:
v2.2.8 (2018-10-16)
- merge conflict; fix parser
v2.2.7 (2016-02-20)
- Fix data-calx-identifier attribute collision
This awesome jQuery plugin is developed by xsanisty. For more Advanced Usages, please check the demo page or visit the official website.