Thursday, August 6, 2015

jQuery Plugin to serialize an HTML5 Form into a JSON object


jQuery Plugin to serialize an HTML5 Form into JSON

by Carmel Schvartzman - The MVC Club


A custom jQuery Plugin for serializing a Form into a JSON object to send in an HTTP request to the server.
This elegant Plugin is a high performance code to transform the data inside an HTML5 Form , into a JSON object serialized to a string. This string can then be sent inside the body of an HTTP POST, HTTP PUT or HTTP PATCH request, in order to be preserved in some database at server side.
This jQuery plugin can be referenced by an MVC View, and of course can be used by any HTML5 web page.
Requisites:
1) your HTML5 web page has to reference the jQuery framework
2) only the fields that have a "name" attribute will be serialized in a JSON object. All other fields that you don't want to serialize, such as hidden identity fields and anything like that, will be ignored.
The requisites for the Form input fields serialization are according to the www.w3.org Recommendation on web Forms .
This plugin uses jQuery utilities such as the serializeArray method .
This Plugin can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryPlugin_FormSerializer

Snapshots:






The Form is serialized into the JSON object as follows:






Usage:

This utility jQuery Plugin is used as follows:






The Plugin's code :


All the Form's fields have to have a "name"  :


The Plugin usage is explained in the following Tutorial:
By Carmel Schvartzman

Enjoy MVC !!!


פיתוח: כרמל שוורצמן