A Simple jQuery plug-in that helps serializing the forms in better yet simplest way possible.
Note: Incase when there is multiple form elements are selected, it will only serialize the first form element.
1. serialize()
2. populate()
Get form data as JSON Object (by passing type
as json).
$('#formId').serialize('json');
Get form as Query String.
$('#formId').serialize(); //same as jQuery's $('#formId').serialize()
But if you pass type
as queryString
$('#formId').serialize('queryString');
then Instead of this kind of Query String:
hobby=football&hobby=tennis //output of $('#formId').serialize()
it will return this:
hobby=football,tennis //output of $('#formId').serialize('queryString')
You can also set custom elements selector inside a Form.
//serialize only `input` tags' value
$('#formId').serialize({type: 'queryString', inputSelector: 'input'});
//serialize only `input` tags' value which has type="text"
$('#formId').serialize({type: 'queryString', inputSelector: 'input[type="text"]'});
You can also serialize disabled
elements by setting serializeDisabled
as true
.
$('#formId').serialize({type: 'queryString', serializeDisabled: true});
Populate/Fill Form with JSON Object
$('#formId').populate(jsonObject);
Populate/Fill Form with QueryString Object
$('#formId').populate(queryString);
You can pass inputSelector
to populate custom selected elements.
$('#formId').populate(queryString, {inputSelector: "input[type='text']"});
If you have multiple values in comma separated manner in query param (e.g. Serialized with $('#formId').serialize('queryString')), you need set separateMultiParam
option to true for populate() to work.
$('#formId').populate(queryString, {separateMultiParam: true});