alimp5/jsonify

JSONify is a minimal (less than a KB!) HTML-form to JSON converting plugin for jQuery.

JSONify

JSONify is a minimal (less than a KB!) HTML-form to JSON to HTML-form converting plugin for jQuery. It creates JSON string from the name-and-value pair of form fields, and can perform JSON to form initialization.

Latest Release - v0.3.2

Now includes support for loading data from JSON to form, AKA "deJSONify", just like jsonify() extracts data from the form fields, dejsonify() can assign JSON data back to form fields. See usage section for more.

Usage

JSONify can be included in your webpage as follows:

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

It provides two methods jsonify() and dejsonify(data) to perform Form Data to JSON and JSON to Form Data conversions.

jsonify()

---

This method converts form field values into standard JSON object, it can be called on any valid form element, which returns JSON string representing the form fields. Note that form fields must have name attribute in order to be included in JSON string.

Additionally, you can provide stringify parameter to method to specify whether to get JSON string or JSON object, using jsonify({ stringify:true }) (default is false).

dejsonify(data)

---

This method performs extact reverse operation of jsonify, call this method on any valid form element having input fields with attribute name specified, pass the parameter data, which can be a valid JSON object or string, and it will assign values of each item from data to the matching name of input fields.

Example

Include in your webpage as:

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

Your form in page:

<form id="myform">
	<label>Name:</label>
	<input type="text" name="name"/>
	<label>Email</label>
	<input type="text" name="email"/>
	<label>Password</label>
	<input type="password" name="password"/>
</form>

Calling jsonify() as follows:

$("#myform").jsonify();

Returned JSON string:

{"name":"Kushal","email":"[email protected]","password":"awesome"}

Calling dejsonify() as follows:

$("#myform").dejsonify({
	"name": "Kushal",
	"email": "[email protected]",
	"password": "awesome"
});

And you'll have form items filled up with matching key names with name attribute of each field.

Issues

Feel free to submit any issue OR helping to fix an issue.

##Version Information

• 0.1 - First Release.
• 0.2 - Option can be provided whether to create JSON string or JSON object.
• 0.3 - Support for JSON to form initialization added via method dejsonify.
• 0.3.1 - Fixes incorrect value population with dejsonify when input types radio and checkbox are present in form.
• 0.3.2 - Fix improper null check in jsonify method.

Author

Kushal Pandya