Form formatting plug-in jquery. serializeJSON, jquery form serialize

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.serializeJSONYou 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,selectAnd 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"]}

 

serializeJSONMethod returns a JS object, not a JSON string. AvailableJSON.stringifyConvert 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-typeProperty, instead:typeMark.

 

<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 (unlessinput namesUse:types)
• KeysAlways as a string (by default, it does not automatically detect whether to convert to an array)
• UnselectedcheckboxesWill be ignored
• disabledOfelementsWill 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 serializeJSONcheckboxUncheckedValueConfiguration, or you cancheckboxesAdddata-unchecked-valueAttribute.

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-valueAttribute

 

<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

AvailablecustomTypesConfigure 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

UseuseIntKeyAsArrayIndexConfiguration

 

<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' }}

 

UseuseIntKeyAsArrayIndexYou 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.