An HTML Form Chained To a JavaScript Object, With Nested Attribute Support

jquery.serializeJSON is the addition of the serializeJSON() method to jQuery to serialize a form to a JavaScript object. Supports the same format for nested parameters used in Ruby on Rails.

serializeJSON is a powerful jQuery-based serial program that makes it easy to serialize 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, selection, checkbox, or more.
  • Supports custom data types: String, Boolean, Number, Array, Object, or more.

How to make use of it:

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

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

2. Call the function in your HTML type to serialize the form data right into a JavaScript object.

  <!-- Basic -->
  <input type="text" name="username" value="webcodeflow" />
  <!-- Nested Attributes -->
  <input type="text" name="site[name]" value="WCF" />
  <input type="url" name="site[url]" value="" />
  <!-- Nested Arrays -->
  <input type="hidden" name="plugins[0][popular]" value="0" />
  <input type="checkbox" name="plugins[0][popular]" value="1" checked />
  <textarea name="plugins[1][name]"></textarea>
  <!-- Select -->
  <select multiple name="selectMultiple[]">
    <option value="html" selected>HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js">JavaScript</option>
const result = $('form').serializeJSON();

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

const json = JSON.stringify(result);

4. Determine the information type by utilizing the :type suffix or data-value-type attribute:

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

5. Or specify an information type utilizing the customTypes function:

  customTypes: {
    myType: (strVal, el) => {
      // strVal: is the input value as a string
      // el: is the dom element. $(el) would be the jQuery element

6. Handle the uncheck value of your checkbox:

<input type="checkbox" name="checked[b]:boolean" value="true" data-unchecked-value="false" checked />
<input type="checkbox" name="checked[numb]" value="1" data-unchecked-value="0" checked />
<input type="checkbox" name="checked[cool]" value="YUP" checked />
  checkboxUncheckedValue: 'NOPE'

7. Full configuration choices:


  // to include that value for unchecked checkboxes (instead of ignoring them)
  checkboxUncheckedValue: undefined, 

  // name="foo[2]" value="v" => {foo: [null, null, "v"]}, instead of {foo: ["2": "v"]}
  useIntKeysAsArrayIndex: false, 

  // skip serialization of falsy values for listed value types
  skipFalsyValuesForTypes: [], 

  // skip serialization of falsy values for listed field names
  skipFalsyValuesForFields: [], 

  // do not interpret ":type" suffix as a type
  disableColonTypes: false, 

  // extends defaultTypes
  customTypes: {}, 

  // default types
  defaultTypes: {
    "string":  function(str) { return String(str); },
    "number":  function(str) { return Number(str); },
    "boolean": function(str) { var falses = ["false", "null", "undefined", "", "0"]; return falses.indexOf(str) === -1; },
    "null":    function(str) { var falses = ["false", "null", "undefined", "", "0"]; return falses.indexOf(str) === -1 ? str : null; },
    "array":   function(str) { return JSON.parse(str); },
    "object":  function(str) { return JSON.parse(str); },
    "skip":    null // skip is a special type used to ignore fields

  // default type
  defaultType: "string",

Fully Featured Form Serializer, jquery serialize JSON Plugin/Github, serialize form data to json, jquery serialize object, form serialize stringify, serialize form in json format, jquery ajax post form serializearray

See Demo And Download

Official Website(marioizquierdo): Click Here

This superior jQuery/javascript plugin is developed by marioizquierdo. For extra Advanced Usages, please go to the official website.

Related Posts


Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…


Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…


Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…


Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…


GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….


Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…