serializer json - Free Download Fully Featured Form Serializer In jQuery - serializeJSON

Free Download Fully Featured Form Serializer In jQuery – serializeJSON

By Posted on

This time I will share jQuery Plugin and tutorial about Fully Featured Form Serializer In jQuery – serializeJSON, hope it will help you in programming stack.

serializer json - Free Download Fully Featured Form Serializer In jQuery - serializeJSON
File Size: 148 KB
Views Total: 83
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

serializeJSON is a robust jQuery based form serializer that makes it easier to serialize your form data into a JavaScript object containing key/value pairs for further use.

Key Features:

  • Easy to use.
  • Supports nested attributes and arrays.
  • Supports almost all form fields like input, select, checkbox, …
  • Supports custom data types: string, boolean, number, array, object, …

See Also:

How to use it:

1. Insert the JavaScript file jquery.serializejson.min.js after loading jQuery library and we’re ready to go.

view source
1 <script src="/path/to/cdn/jquery.slim.min.js"></script>
2 <script src="/path/to/jquery.serializejson.js"></script>

2. Call the function on your HTML form to serialize the form data into a JavaScript object.

view source
01 <form>
02   <!-- Basic -->
03   <input type="text" name="username" value="jqueryscript" />
04   <!-- Nested Attributes -->
05   <input type="text" name="site[name]" value="jQuery Script" />
06   <input type="url" name="site[url]" value="https://www.jqueryscript.net/" />
07   <!-- Nested Arrays -->
08   <input type="hidden" name="plugins[0][popular]" value="0" />
09   <input type="checkbox" name="plugins[0][popular]" value="1" checked />
10   <textarea name="plugins[1][name]"></textarea>
11   <!-- Select -->
12   <select multiple name="selectMultiple[]">
13     <option value="html" selected>HTML</option>
14     <option value="css" selected>CSS</option>
15     <option value="js">JavaScript</option>
16   </select>
17 </form>
view source
1 const result = $('form').serializeJSON();

3. Convert the JavaScript object into a JSON string if needed.

view source
1 const json = JSON.stringify(result);

4. Determine the data type (string by default) by using the :type suffix or data-value-type attribute:

view source
1 <input type="text" name="excluded:skip" value="ignored field" />
2 <input type="text" name="numbers[1]:number" value="1" />
3 <input type="text" name="bools[true]:boolean" value="true" />
4 <input type="text" name="nulls[null]:null" value="null" />
5 <input type="text" name="arrays[list]:array" value="[1, 2, 3]"/>
6 <input type="text" name="objects[dict]:object" value='{"key": "value"}' />
7 <input type="text" name="anarray" data-value-type="array"  value="[1, 2, 3]"/>

5. Or specify a data type using the customTypes function:

view source
1 $('form').serializeJSON({
2   customTypes: {
3     myType: (strVal, el) => {
4       // strVal: is the input value as a string
5       // el: is the dom element. $(el) would be the jQuery element
6     },
7   }
8 });

6. Handle the uncheck value of your checkbox:

view source
1 <input type="checkbox" name="checked[b]:boolean" value="true" data-unchecked-value="false" checked />
2 <input type="checkbox" name="checked[numb]" value="1" data-unchecked-value="0" checked />
3 <input type="checkbox" name="checked[cool]" value="YUP" checked />
view source
1 $('form').serializeJSON({
2   checkboxUncheckedValue: 'NOPE'
3 });

7. Full configuration options:

view source
01 $('form').serializeJSON({
02  
03   // to include that value for unchecked checkboxes (instead of ignoring them)
04   checkboxUncheckedValue: undefined,
05  
06   // name="foo[2]" value="v" => {foo: [null, null, "v"]}, instead of {foo: ["2": "v"]}
07   useIntKeysAsArrayIndex: false,
08  
09   // skip serialization of falsy values for listed value types
10   skipFalsyValuesForTypes: [],
11  
12   // skip serialization of falsy values for listed field names
13   skipFalsyValuesForFields: [],
14  
15   // do not interpret ":type" suffix as a type
16   disableColonTypes: false,
17  
18   // extends defaultTypes
19   customTypes: {},
20  
21   // default types
22   defaultTypes: {
23     "string":  function(str) { return String(str); },
24     "number":  function(str) { return Number(str); },
25     "boolean": function(str) { var falses = ["false", "null", "undefined", "", "0"]; return falses.indexOf(str) === -1; },
26     "null":    function(str) { var falses = ["false", "null", "undefined", "", "0"]; return falses.indexOf(str) === -1 ? str : null; },
27     "array":   function(str) { return JSON.parse(str); },
28     "object":  function(str) { return JSON.parse(str); },
29     "skip":    null // skip is a special type used to ignore fields
30   },
31  
32   // default type

Related posts:

33   defaultType: "string",