A MooTools library to manage form with "dependent fields".
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



It helps you to develop javascript enhanced forms defining relationship between elements.

Quickly, it make possible to calcute element values like in spreadsheets.



How to use

Import the Mootool library and the MooCell library in the middle of your head tag

	<script type="text/javascript" src="mootools.js" />
	<script type="text/javascript" src="MooCells.js" />

99.999% of times you surely need a good domready

window.addEvent("domready", function(){
	//second step here						

Create an instance of MooCells in the function passed to the domready event

window.addEvent("domready", function(){
	new MooCells({
		cells: {
			cellA: {
				el: document.id("idForCellA"),
			cellB: {
				el: document.id("idForCellB"),
				status: "disabled",
				value: function(cells) {
					return cells.cellA * 5
		onComputing: function(status) {
			console.log("calculating cells values - ", status);
		onCellChange: function(cell) {
			console.log(cell, "has changed");


  • cells: an object {} containing the cells set (see below).
  • format: an object {} contaning information about how to format types. Now allowed value is:
format: {
	decimals: <number>


  • onComputing (status): fired when calculating values. Argument status can be "start"|"end"
  • onCellChange (cellName, cellValue , ScopedCells): fired when a cell changes its value. Arguments: cellName the key of the cell defined in cells set, cellValue the new value applied, ScopedCells the cell set object.

How to Setup Cells

For each cell you have to define a structure like this:

cellkey : { // (String)
	el: , // (Element - mandatory)
	status: , // (String - optional)
	format: , // (String - optional)
	decimals: , // (Number - optional)
	dependsOn: , //(Array[String] - optional)
	value: //(Function(cells) - optional),
	onUpdate: // Function(value) - optional
  • cellKey : (String) an unique name used to reference this cell in MooCell
  • el: (Element - mandatory) the html element this cell is referring to
  • status: (String - optional) This will be applied this value to the el. Can be 'readonly' or 'disabled'.
  • format: (String - optional) Describe the type of data this cell is containing. Can be 'string', 'boolean', 'number'. 'number' is default.
  • decimals: (Number - optional) If format is 'number' you can use this to decide how many decimals the value of this cell has.
  • dependsOn: (Array[String] - optional) The keys of the other cells this cell depends on.
  • value: (Function(cells)) - optional) This function will be used to calculate the value of the cell. One argument will be passed, an object with the cells.
  • onUpdate: (Function(value) - optional) This function will be executed when the cell changes. The argument passed is the current value.