Skip to content

yawetse/forbject

Repository files navigation

forbject NPM version

** CommonJS/Browserified simple form object data mapping, without magic **

Forbject creates key/value pairs from form elements. This is a quick and simple vanilla JS way to map data without the baggage of a full framework.

API Documenation

Example

Check out example/index.html, the example javascript for the example page is resources/js/example_src.js

Installation

$ npm install forbject

Forbject is a browserified/commonjs javascript module.

Usage

JavaScript

var forbject = require('forbject'),
	myforbject;

var updateforbjectData = function(){
  forbject1= new.forbject('#form-selector');
};

//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
	var formelement = document.querySelector('form#myFormObjectSelector');
	myforbject = new forbject(formelement);

	//expose your nav component to the window global namespace
	window.myforbject = myforbject;

  console.log(myforbject.getObject());
});

HTML

<html>
	<head>
  	<title>Your Page</title>
  	<script src='[path/to/browserify/bundle].js'></script>
	</head>
	<body>
    <form id="form-selector">
      <section>
        <label for="field1">Field 1</label>
        <input type="text" value="fieldval1" name="field1" id="field1" />
      </section>
      <section>
        <label for="field2">Field 2</label>
        <input type="text" value="fieldval2" name="field2" id="field2" />
      </section>
    </form>
	</body>
</html>

##API

//update form elements to JSON from Form element
myforbject.refresh(); 

//get form object
myforbject.getObject(); 

//events
myforbject.on('init',callback); // callback()
myforbject.on('serialized',callback); // callback(data)
myforbject.on('refresh',callback); // callback(data)

##Development Make sure you have grunt installed

$ npm install -g grunt-cli

Then run grunt watch

$ grunt watch

##For generating documentation

$ grunt doc
$ jsdoc2md lib/**/*.js index.js > doc/api.md

##Notes

  • The Forbject Module uses Node's event Emitter for event handling.

About

simple form to object mapping

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published