Form formatting plug-in jquery. serializeJSON, jquery form serialize
Preface
When the front-end processes a Form that contains a large amount of data, in addition to using Form to directly submit and refresh the page, the common requirement is to collect the Form information into a data object and submit it through Ajax.
When processing complex forms, it is very troublesome to manually judge and process the field values one by one. The plug-in introduced later will solve this problem.
About serializeJSON
Usejquery.serializeJSON
You can call.serializeJSON()
Method to serialize the form data into JS objects.
Use
You only need to introduce it in jQuery or Zepto.
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.serializejson.js"></script>
Example
HTML form
(Supportedinput
,textarea
,select
And other labels)
<form id="my-profile"> <!-- simple attribute --> <input type="text" name="fullName" value="Mario Izquierdo" /> <!-- nested attributes --> <input type="text" name="address[city]" value="San Francisco" /> <input type="text" name="address[state][name]" value="California" /> <input type="text" name="address[state][abbr]" value="CA" /> <!-- array --> <input type="text" name="jobbies[]" value="code" /> <input type="text" name="jobbies[]" value="climbing" /> <!-- textareas, checkboxes ... --> <textarea name="projects[0][name]">serializeJSON</textarea> <textarea name="projects[0][language]">javascript</textarea> <input type="hidden" name="projects[0][popular]" value="0" /> <input type="checkbox" name="projects[0][popular]" value="1" checked /> <textarea name="projects[1][name]">tinytest.js</textarea> <textarea name="projects[1][language]">javascript</textarea> <input type="hidden" name="projects[1][popular]" value="0" /> <input type="checkbox" name="projects[1][popular]" value="1"/> <!-- select --> <select name="selectOne"> <option value="paper">Paper</option> <option value="rock" selected>Rock</option> <option value="scissors">Scissors</option> </select> <!-- select multiple options, just name it as an array[] --> <select multiple name="selectMultiple[]"> <option value="red" selected>Red</option> <option value="blue" selected>Blue</option> <option value="yellow">Yellow</option> </select></form>
javascript
:
$('#my-profile').serializeJSON(); // returns =>{ fullName: "Mario Izquierdo", address: { city: "San Francisco", state: { name: "California", abbr: "CA" } }, jobbies: ["code", "climbing"], projects: { '0': { name: "serializeJSON", language: "javascript", popular: "1" }, '1': { name: "tinytest.js", language: "javascript", popular: "0" } }, selectOne: "rock", selectMultiple: ["red", "blue"]}
serializeJSON
Method returns a JS object, not a JSON string. AvailableJSON.stringify
Convert to a string (note IE8 compatibility ).
JavaScript authoritative guide (6th) (Chinese version) http://www.gooln.com/document/452.html
var jsonString = JSON.stringify(obj);
Data Type
The obtained property value is generally a string. You can use HTML to specify the type for forced conversion.
<form> <input type="text" name="notype" value="default type is :string"/> <input type="text" name="string:string" value=":string type overrides parsing options"/> <input type="text" name="excluded:skip" value="Use :skip to not include this field in the result"/> <input type="text" name="number[1]:number" value="1"/> <input type="text" name="number[1.1]:number" value="1.1"/> <input type="text" name="number[other stuff]:number" value="other stuff"/> <input type="text" name="boolean[true]:boolean" value="true"/> <input type="text" name="boolean[false]:boolean" value="false"/> <input type="text" name="boolean[0]:boolean" value="0"/> <input type="text" name="null[null]:null" value="null"/> <input type="text" name="null[other stuff]:null" value="other stuff"/> <input type="text" name="auto[string]:auto" value="text with stuff"/> <input type="text" name="auto[0]:auto" value="0"/> <input type="text" name="auto[1]:auto" value="1"/> <input type="text" name="auto[true]:auto" value="true"/> <input type="text" name="auto[false]:auto" value="false"/> <input type="text" name="auto[null]:auto" value="null"/> <input type="text" name="auto[list]:auto" value="[1, 2, 3]"/> <input type="text" name="array[empty]:array" value="[]"/> <input type="text" name="array[list]:array" value="[1, 2, 3]"/> <input type="text" name="object[empty]:object" value="{}"/> <input type="text" name="object[dict]:object" value='{"my": "stuff"}'/></form>
$('form').serializeJSON(); // returns =>{ "notype": "default type is :string", "string": ":string type overrides parsing options", // :skip type removes the field from the output "number": { "1": 1, "1.1": 1.1, "other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number) }, "boolean": { "true": true, "false": false, "0": false, // <-- "false", "null", "undefined", "", "0" parse as false }, "null": { "null": null, // <-- "false", "null", "undefined", "", "0" parse as null "other stuff": "other stuff" }, "auto": { // works as the parseAll option "string": "text with stuff", "0": 0, // <-- parsed as number "1": 1, // <-- parsed as number "true": true, // <-- parsed as boolean "false": false, // <-- parsed as boolean "null": null, // <-- parsed as null "list": "[1, 2, 3]" // <-- array and object types are not auto-parsed }, "array": { // <-- works using JSON.parse "empty": [], "not empty": [1,2,3] }, "object": { // <-- works using JSON.parse "empty": {}, "not empty": {"my": "stuff"} }}
You can also specifydata-value-type
Property, instead:type
Mark.
<form> <input type="text" name="number[1]" data-value-type="number" value="1"/> <input type="text" name="number[1.1]" data-value-type="number" value="1.1"/> <input type="text" name="boolean[true]" data-value-type="boolean" value="true"/> <input type="text" name="null[null]" data-value-type="null" value="null"/> <input type="text" name="auto[string]" data-value-type="auto" value="0"/></form>
Options configuration Default Configuration
- Values is always a string (unless
input names
Use:types
)
Keys
Always as a string (by default, it does not automatically detect whether to convert to an array)
- Unselected
checkboxes
Will be ignored
disabled
Ofelements
Will be ignored
Custom Configuration
Description: checkboxUncheckedValue: string: For uncheckboxes, set the value parseBooleans: true to automatically detect and convert "true" and "false" to boolean values true and falseparseNumbers: true Automatic Detection converts "1", "33.33", "-44" to numbers 1, 33.33, and-44 parseNulls: true Automatic Detection string "null" to nullparseAll: true automatically detects the conversion of the preceding string parseWithFunction: function custom Conversion function (value, name) {return parsedValue} customTypes :{} custom: types overwrites the default types, for example, {type: function (value ){...}} DefaultTypes: {defaultTypes} redefine all: types, for example, {type: function (value ){...}} UseIntKeysAsArrayIndex: true when keys is an integer, It is serialized as an array
Contains uncheckboxes
Support for serializeJSONcheckboxUncheckedValue
Configuration, or you cancheckboxes
Adddata-unchecked-value
Attribute.
Default method:
<form> <input type="checkbox" name="check1" value="true" checked/> <input type="checkbox" name="check2" value="true"/> <input type="checkbox" name="check3" value="true"/></form>
$('form').serializeJSON(); // returns =>{'check1': 'true'} // Note that check2 and check3 are not included because they are not checked
The checkbox not selected is ignored in the preceding writing method. If you want to include them, you can use the following methods:
1. ConfigurationcheckboxUncheckedValue
$('form').serializeJSON({checkboxUncheckedValue: "false"}); // returns =>{'check1': 'true', check2: 'false', check3: 'false'}
2. Adddata-unchecked-value
Attribute
<form id="checkboxes"> <input type="checkbox" name="checked[bool]" value="true" data-unchecked-value="false" checked/> <input type="checkbox" name="checked[bin]" value="1" data-unchecked-value="0" checked/> <input type="checkbox" name="checked[cool]" value="YUP" checked/> <input type="checkbox" name="unchecked[bool]" value="true" data-unchecked-value="false" /> <input type="checkbox" name="unchecked[bin]" value="1" data-unchecked-value="0" /> <input type="checkbox" name="unchecked[cool]" value="YUP" /> <!-- No unchecked value specified --></form>
$('form#checkboxes').serializeJSON(); // Note no option is used // returns =>{ 'checked': { 'bool': 'true', 'bin': '1', 'cool': 'YUP' }, 'unchecked': { 'bool': 'false', 'bin': '0' // Note that unchecked cool does not appear, because it doesn't use data-unchecked-value }}
Automatic detection of conversion types
The default type is string.:string
, Which can be converted to another type through Configuration
$('form').serializeJSON({parseNulls: true, parseNumbers: true}); // returns =>{ "bool": { "true": "true", // booleans are still strings, because parseBooleans was not set "false": "false", } "number": { "0": 0, // numbers are parsed because parseNumbers: true "1": 1, "2.2": 2.2, "-2.25": -2.25, } "null": null, // "null" strings are converted to null becase parseNulls: true "string": "text is always string", "empty": ""}
In rare cases, you can use custom conversion functions.
var emptyStringsAndZerosToNulls = function(val, inputName) { if (val === "") return null; // parse empty strings as nulls if (val === 0) return null; // parse 0 as null return val;} $('form').serializeJSON({parseWithFunction: emptyStringsAndZerosToNulls, parseNumbers: true}); // returns =>{ "bool": { "true": "true", "false": "false", } "number": { "0": null, // <-- parsed with custom function "1": 1, "2.2": 2.2, "-2.25": -2.25, } "null": "null", "string": "text is always string", "empty": null // <-- parsed with custom function}
Custom type
AvailablecustomTypes
Configure the custom type or overwrite the default type ($.serializeJSON.defaultOptions.defaultTypes
)
<form> <input type="text" name="scary:alwaysBoo" value="not boo"/> <input type="text" name="str:string" value="str"/> <input type="text" name="number:number" value="5"/></form>
$('form').serializeJSON({ customTypes: { alwaysBoo: function(str) { // value is always a string return "boo"; }, string: function(str) { // all strings will now end with " override" return str + " override"; } }}); // returns =>{ "scary": "boo", // <-- parsed with type :alwaysBoo "str": "str override", // <-- parsed with new type :string (instead of the default) "number": 5, // <-- the default :number still works}
Ignore empty form fields
// Select only imputs that have a non-empty value$('form :input[value!=""]').serializeJSON(); // Or filter them from the formobj = $('form').find('input').not('[value=""]').serializeJSON(); // For more complicated filtering, you can use a functionobj = $form.find(':input').filter(function () { return $.trim(this.value).length > 0 }).serializeJSON();
Use an integer keys as the order of the array
UseuseIntKeyAsArrayIndex
Configuration
<form> <input type="text" name="arr[0]" value="foo"/> <input type="text" name="arr[1]" value="var"/> <input type="text" name="arr[5]" value="inn"/></form>
Follow the default method and the result is:
$('form').serializeJSON(); // returns =>{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}
UseuseIntKeyAsArrayIndex
You can convert records into arrays and create an order.
$('form').serializeJSON({useIntKeysAsArrayIndex: true}); // returns =>{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}
Default Defaults Configuration
All default configurations are defined in$.serializeJSON.defaultOptions
, Which can be modified.
$.serializeJSON.defaultOptions.parseAll = true; // parse booleans, numbers and nulls by default $('form').serializeJSON(); // No options => then use $.serializeJSON.defaultOptions // returns =>{ "bool": { "true": true, "false": false, } "number": { "0": 0, "1": 1, "2.2": 2.2, "-2.25": -2.25, } "null": null, "string": "text is always string", "empty": ""}
Summary
This plug-in supports a wide range of configurations, a high degree of customization, and brings great convenience.