Icontem

jQuery Calx: Calculate form input values based on formulas

Recommend this page to a friend!
  Info   Demos   View files View files (206)   DownloadInstall with Composer Download .zip   Reputation   Support forum (3)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2016-05-21 (2 months ago) RSS 2.0 feedNot enough user ratingsTotal: 233 This week: 1All time: 188 This week: 23Up
Version License JavaScript version Categories
jquery-calx 2.0.1MIT/X Consortium ...1.3HTML, jQuery, Math
Description Author

This is a jQuery plug-in that can calculate form input values based on formulas.

It can traverse the input elements of a given HTML form to determine which have a data attribute that defines a formula to automatically calculate the input value.

This plug-in evaluates the formulas when a blur event occurs and update form inputs with the results of the evaluated formulas.

The formulas define math expressions that can involve values of other form input and support operations like addition, subtraction, multiplication, division, etc..

Picture of ikhsan
Name: ikhsan <contact>
Classes: 1 package by
Country: Indonesia Indonesia
Age: 27
All time rank: 981 in Indonesia Indonesia
Week rank: 23 Up1 in Indonesia Indonesia Equal

Details
#jQuery Calx

[![Baikal](https://baikal.io/badges/xsanisty/jquery-calx)](https://baikal.io/xsanisty/jquery-calx)
[![Join the chat at https://gitter.im/xsanisty/jquery-calx](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/xsanisty/jquery-calx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

jQuery Calx is an Excel calculation engine and formula parser built as jQuery plugin, it offer spreadsheet ability to process and
calculate the formula without bringing table-like spreadsheet interface.

In the core of jQuery Calx is formula parser generated using [jison](https://github.com/zaach/jison) which parse and process the
formula and set of formulas imported from [formula.js](https://github.com/sutoiku/formula.js).

Creating calculation form in html never been easier and simpler than this:

```html
<form id="calx_form">
    <input data-cell="A1">
    <input data-cell="A2">
    <input data-cell="A3">

    <input data-formula="SUM(A1:A3)">
    <input data-formula="AVERAGE(A1:A3)">
    <input data-formula="(A1+A2)*A3">
    <input data-formula="(A1^2)+(A2^2)+(A3^2)">
</form>

<script>
    $('#calx_form').calx();
</script>
```

If you don't want the formula make your html looks messy, you can move all formula and formatting rule into the js, and leave only `data-cell` attribute.

```html
<form id="calx_form">
    <input data-cell="A1">
    <input data-cell="A2">
    <input data-cell="A3">

    <input data-cell="B1">
    <input data-cell="B2">
    <input data-cell="B3">
    <input data-cell="B4">
</form>

<script>
    $('#calx_form').calx({
        data : {
            B1 : {format: '$ 0,0', formula: 'SUM(A1:A3)'},
            B2 : {format: '0.00', formula: 'AVERAGE(A1:A3)'},
            B3 : {formula: 'LOG(A1)*(A2/A3)'},
            B4 : {formula: 'MAX(A1:A3)'}
        }
    });
</script>
```

You can even completely remove hidden cell that act as proxy or intermediate cell and move it to javascript section

```html
<form id="calx_form">
    <input data-cell="B4">
</form>

<script>
    $('#calx_form').calx({
        data : {
            B1 : {value: '100'},
            B2 : {value: '200'},
            B3 : {formula: 'B1+B2'},
            B4 : {formula: 'B3^2'}
        }
    });
</script>
```

# Installation

You can install jQuery Calx by downloading the latest version from this repository, or install it using bower

```
bower install jquery-calx
```

or

```
bower install xsanisty/jquery-calx
```

and load the required script into your html page

```html
<!-- the only required dependency -->
<script src="jquery.min.js"></script>
<!-- required for number formatting only -->
<script src="numeral.min.js"></script>
<!-- the jquery calx lib -->
<script src="jquery-calx-2.2.7.min.js"></script>
```

For detailed documentation, [http://www.xsanisty.com/project/calx2](http://www.xsanisty.com/project/calx2).

For jQuery Calx 1.x please visit [http://www.xsanisty.com/project/calx](http://www.xsanisty.com/project/calx)
  jQuery Calx in ActionExternal page  
  Files folder image Files  
File Role Description
Files folder imagedocumentation (2 files, 4 directories)
Files folder imagejs (5 files, 1 directory)
Files folder imagelibrary (8 files)
Files folder imagephp-build (6 files, 2 directories)
Files folder imagesample (12 files, 4 directories)
Accessible without login HTML file readme.html Doc. documentation
Accessible without login Plain text file bower.json Data Auxiliary data
Accessible without login Plain text file calx.jquery.json Data Auxiliary data
Accessible without login Plain text file jquery-1.9.1.min.js Aux. Auxiliary script
Plain text file jquery-calx-2.2.7.js Class Class source
Plain text file jquery-calx-2.2.7.min.js Class Class source
Accessible without login Plain text file MIT-license.txt Doc. Documentation
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  documentation  
File Role Description
Files folder imagecss (3 files)
Files folder imagefont-awesome (2 directories)
Files folder imagejs (2 files)
Files folder imagepages (9 files)
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login Plain text file index.php Data Auxiliary data

  Files folder image Files  /  documentation  /  css  
File Role Description
  Accessible without login Plain text file bootstrap.css Data Auxiliary data
  Accessible without login Plain text file sb-admin.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  documentation  /  font-awesome  
File Role Description
Files folder imagecss (2 files)
Files folder imagefonts (1 file)

  Files folder image Files  /  documentation  /  font-awesome  /  css  
File Role Description
  Accessible without login Plain text file font-awesome.css Data Auxiliary data
  Accessible without login Plain text file font-awesome.min.css Data Auxiliary data

  Files folder image Files  /  documentation  /  font-awesome  /  fonts  
File Role Description
  Accessible without login Plain text file fontawesome-webfont.svg Data Auxiliary data

  Files folder image Files  /  documentation  /  js  
File Role Description
  Accessible without login Plain text file bootstrap.js Aux. Auxiliary script
  Accessible without login Plain text file jquery-1.10.2.js Aux. Auxiliary script

  Files folder image Files  /  documentation  /  pages  
File Role Description
  Accessible without login Plain text file calx_api.php Data Auxiliary data
  Accessible without login Plain text file cell_api.php Data Auxiliary data
  Accessible without login Plain text file configuration.php Data Auxiliary data
  Accessible without login Plain text file dependencies.php Data Auxiliary data
  Accessible without login Plain text file formatting.php Data Auxiliary data
  Accessible without login Plain text file formula.php Data Auxiliary data
  Accessible without login Plain text file initializing.php Data Auxiliary data
  Accessible without login Plain text file overview.php Data Auxiliary data
  Accessible without login Plain text file sheet_api.php Data Auxiliary data

  Files folder image Files  /  js  
File Role Description
Files folder imageflot_plugin (14 files)
  Accessible without login Plain text file jquery.flot.min.js Aux. Auxiliary script
  Accessible without login Plain text file jstat.min.js Aux. Auxiliary script
  Accessible without login Plain text file moment.min.js Aux. Auxiliary script
  Accessible without login Plain text file numeral.min.js Aux. Auxiliary script
  Accessible without login Plain text file numeric.min.js Aux. Auxiliary script

  Files folder image Files  /  js  /  flot_plugin  
File Role Description
  Accessible without login Plain text file jquery.flot.canvas.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.categories.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.crosshair.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.errorbars.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.fillbetween.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.image.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.navigate.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.pie.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.resize.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.selection.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.stack.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.symbol.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.threshold.js Aux. Auxiliary script
  Accessible without login Plain text file jquery.flot.time.js Aux. Auxiliary script

  Files folder image Files  /  library  
File Role Description
  Accessible without login Plain text file parser-2.0.0-rev-1.jison Data Auxiliary data
  Accessible without login Plain text file parser-2.0.0-rev-2.jison Data Auxiliary data
  Accessible without login Plain text file parser-2.0.0-rev-3.jison Data Auxiliary data
  Accessible without login Plain text file parser-2.0.0-rev-4.jison Data Auxiliary data
  Plain text file parser-rev-2.js Class Class source
  Plain text file parser-rev-3.js Class Class source
  Plain text file parser-rev-4.js Class Class source
  Plain text file parser-rev1.js Class Class source

  Files folder image Files  /  php-build  
File Role Description
Files folder imageinclude (10 files, 4 directories)
Files folder imagevendor (1 file, 2 directories)
  Accessible without login Plain text file build Data Auxiliary data
  Accessible without login Plain text file build-sample Data Auxiliary data
  Accessible without login Plain text file calx-build-sample.php Data Auxiliary data
  Accessible without login Plain text file calx-build.php Data Auxiliary data
  Accessible without login Plain text file composer.json Data Auxiliary data
  Accessible without login Plain text file composer.lock Data Auxiliary data

  Files folder image Files  /  php-build  /  include  
File Role Description
Files folder imagecalx (14 files)
Files folder imagecell (31 files)
Files folder imageformula (13 files)
Files folder imagesheet (42 files)
  Plain text file calx.js Class Class source
  Plain text file cell.js Class Class source
  Plain text file data.js Class Class source
  Plain text file defaultConfig.js Class Class source
  Plain text file formula.js Class Class source
  Plain text file ieHack.js Class Class source
  Plain text file jQueryCalx.js Class Class source
  Plain text file parserFactory.js Class Class source
  Plain text file sheet.js Class Class source
  Plain text file utility.js Class Class source

  Files folder image Files  /  php-build  /  include  /  calx  
File Role Description
  Plain text file calculate.js Class Class source
  Plain text file destroy.js Class Class source
  Plain text file evaluate.js Class Class source
  Plain text file getCell.js Class Class source
  Accessible without login Plain text file getFormula.js Aux. Auxiliary script
  Plain text file getSheet.js Class Class source
  Plain text file getUtility.js Class Class source
  Plain text file init.js Class Class source
  Plain text file refresh.js Class Class source
  Plain text file registerFunction.js Class Class source
  Plain text file registerVariable.js Class Class source
  Plain text file reset.js Class Class source
  Plain text file setValue.js Class Class source
  Plain text file update.js Class Class source

  Files folder image Files  /  php-build  /  include  /  cell  
File Role Description
  Plain text file buildDependency.js Class Class source
  Plain text file calculate.js Class Class source
  Plain text file checkCircularReference.js Class Class source
  Plain text file evaluateFormula.js Class Class source
  Plain text file formTags.js Class Class source
  Plain text file getAddress.js Class Class source
  Plain text file getFloatValue.js Class Class source
  Plain text file getFormat.js Class Class source
  Plain text file getFormattedValue.js Class Class source
  Plain text file getFormula.js Class Class source
  Plain text file getStringValue.js Class Class source
  Plain text file getValue.js Class Class source
  Plain text file hasRemoteDependency.js Class Class source
  Plain text file highlightDependant.js Class Class source
  Plain text file init.js Class Class source
  Plain text file isAffected.js Class Class source
  Plain text file isProcessed.js Class Class source
  Plain text file processDependant.js Class Class source
  Plain text file processDependency.js Class Class source
  Plain text file registerDependant.js Class Class source
  Plain text file removeDependant.js Class Class source
  Plain text file removeDependency.js Class Class source
  Plain text file renderComputedValue.js Class Class source
  Plain text file resyncFormula.js Class Class source
  Plain text file resyncValue.js Class Class source
  Plain text file setAffected.js Class Class source
  Plain text file setConditionalStyle.js Class Class source
  Plain text file setFormat.js Class Class source
  Plain text file setFormula.js Class Class source
  Plain text file setProcessed.js Class Class source
  Plain text file setValue.js Class Class source

  Files folder image Files  /  php-build  /  include  /  formula  
File Role Description
  Plain text file custom.js Class Class source
  Plain text file date.js Class Class source
  Plain text file engineering.js Class Class source
  Plain text file financial.js Class Class source
  Plain text file general.js Class Class source
  Plain text file geometry.js Class Class source
  Plain text file logical.js Class Class source
  Plain text file math.js Class Class source
  Plain text file statistic.js Class Class source
  Plain text file stoic.js Class Class source
  Plain text file text.js Class Class source
  Plain text file trigonometry.js Class Class source
  Plain text file user_defined.js Class Class source

  Files folder image Files  /  php-build  /  include  /  sheet  
File Role Description
  Plain text file applyChange.js Class Class source
  Plain text file attachEvent.js Class Class source
  Plain text file buildCellDependency.js Class Class source
  Plain text file calculate.js Class Class source
  Accessible without login Plain text file calculateDependant.js Aux. Auxiliary script
  Accessible without login Plain text file calculateDependency.js Aux. Auxiliary script
  Plain text file callFunction.js Class Class source
  Plain text file checkCircularReference.js Class Class source
  Plain text file clearAffectedCell.js Class Class source
  Plain text file clearCalculatedFlag.js Class Class source
  Plain text file clearDependencies.js Class Class source
  Plain text file clearProcessedFlag.js Class Class source
  Plain text file comparator.js Class Class source
  Plain text file evaluate.js Class Class source
  Plain text file getActiveCell.js Class Class source
  Plain text file getCell.js Class Class source
  Plain text file getCellRange.js Class Class source
  Plain text file getCellRangeValue.js Class Class source
  Plain text file getCellValue.js Class Class source
  Plain text file getRemoteCell.js Class Class source
  Plain text file getRemoteCellRange.js Class Class source
  Accessible without login Plain text file getRemoteCellRangeValue.js Example Example script
  Plain text file getRemoteCellValue.js Class Class source
  Plain text file getVariable.js Class Class source
  Plain text file goalSeek.js Class Class source
  Plain text file hasRelatedSheet.js Class Class source
  Plain text file init.js Class Class source
  Plain text file isCalculated.js Class Class source
  Plain text file obj.js Class Class source
  Plain text file refresh.js Class Class source
  Plain text file registerCell.js Class Class source
  Plain text file registerDependant.js Class Class source
  Plain text file registerDependency.js Class Class source
  Plain text file registerVariable.js Class Class source
  Plain text file removeCell.js Class Class source
  Plain text file renderComputedValue.js Class Class source
  Plain text file reset.js Class Class source
  Plain text file scan.js Class Class source
  Plain text file setActiveCell.js Class Class source
  Plain text file setCalculated.js Class Class source
  Plain text file time.js Class Class source
  Plain text file update.js Class Class source

  Files folder image Files  /  php-build  /  vendor  
File Role Description
Files folder imagecomposer (6 files)
Files folder imagedevize (1 directory)
  Accessible without login Plain text file autoload.php Data Auxiliary data

  Files folder image Files  /  php-build  /  vendor  /  composer  
File Role Description
  Accessible without login Plain text file autoload_classmap.php Data Auxiliary data
  Accessible without login Plain text file autoload_namespaces.php Data Auxiliary data
  Accessible without login Plain text file autoload_psr4.php Data Auxiliary data
  Accessible without login Plain text file autoload_real.php Data Auxiliary data
  Accessible without login Plain text file ClassLoader.php Data Auxiliary data
  Accessible without login Plain text file installed.json Data Auxiliary data

  Files folder image Files  /  php-build  /  vendor  /  devize  
File Role Description
Files folder imageclosure-compiler (4 files, 2 directories)

  Files folder image Files  /  php-build  /  vendor  /  devize  /  closure-compiler  
File Role Description
Files folder imagecompiler-latest (2 files)
Files folder imagesrc (1 directory)
  Accessible without login Plain text file build.xml Data Auxiliary data
  Accessible without login Plain text file composer.json Data Auxiliary data
  Accessible without login Plain text file LICENSE Lic. License text
  Accessible without login Plain text file README.md Data Auxiliary data

  Files folder image Files  /  php-build  /  vendor  /  devize  /  closure-compiler  /  compiler-latest  
File Role Description
  Accessible without login Plain text file COPYING Doc. Documentation
  Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  php-build  /  vendor  /  devize  /  closure-compiler  /  src  
File Role Description
Files folder imageClosureCompiler (2 files)

  Files folder image Files  /  php-build  /  vendor  /  devize  /  closure-compiler  /  src  /  ClosureCompiler  
File Role Description
  Accessible without login Plain text file ClosureCompiler.php Data for minifiying the output
  Accessible without login Plain text file CompilerException.php Data error handler

  Files folder image Files  /  sample  
File Role Description
Files folder imageapp (1 file)
Files folder imagecss (3 files)
Files folder imagefont-awesome (2 directories)
Files folder imagejs (2 files)
  Accessible without login HTML file basic.html Doc. Documentation
  Accessible without login HTML file chart.html Doc. Documentation
  Accessible without login HTML file checkbox.html Doc. Documentation
  Accessible without login HTML file complex.html Doc. Documentation
  Accessible without login HTML file data.html Doc. Documentation
  Accessible without login HTML file dynamic_form.html Doc. Documentation
  Accessible without login HTML file formula.html Doc. Documentation
  Accessible without login Plain text file formula.php Data Auxiliary data
  Accessible without login HTML file index.html Doc. Documentation
  Accessible without login HTML file multisheet.html Doc. Documentation
  Accessible without login HTML file radiobox.html Doc. Documentation
  Accessible without login HTML file untitled.html Doc. Documentation

  Files folder image Files  /  sample  /  app  
File Role Description
  Accessible without login HTML file budget_planner.html Doc. Documentation

  Files folder image Files  /  sample  /  css  
File Role Description
  Accessible without login Plain text file bootstrap.css Data Auxiliary data
  Accessible without login Plain text file sb-admin.css Data Auxiliary data
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  sample  /  font-awesome  
File Role Description
Files folder imagecss (2 files)
Files folder imagefonts (1 file)

  Files folder image Files  /  sample  /  font-awesome  /  css  
File Role Description
  Accessible without login Plain text file font-awesome.css Data Auxiliary data
  Accessible without login Plain text file font-awesome.min.css Data Auxiliary data

  Files folder image Files  /  sample  /  font-awesome  /  fonts  
File Role Description
  Accessible without login Plain text file fontawesome-webfont.svg Data Auxiliary data

  Files folder image Files  /  sample  /  js  
File Role Description
  Plain text file bootstrap.js Class Class source
  Plain text file jquery-calx-sample-2.2.7.min.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 99%
Total:233
This week:1
All time:188
This week:23Up
User Comments (1)
It is very useful and easy to use.
3 years ago (Tom Schaefer)
70%StarStarStarStar