❤
npm
Sign UpSign In

forbject

1.4.0 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i forbject

Repository

github.com/yawetse/forbject

Homepage

github.com/yawetse/forbject

Weekly Downloads

13

Version

1.4.0

License

none

Last publish

Collaborators

  • yawetse
Try on RunKit
Report malware