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.

<form>
  <!-- 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="webcodeflow.com" />
  <!-- 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>
  </select>
</form>

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:

$('form').serializeJSON({
  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 />

$('form').serializeJSON({
  checkboxUncheckedValue: 'NOPE'
});

7. Full configuration choices:

$('form').serializeJSON({

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