Serialize Form Data Into JSON Object In jQuery - serializeToJSON

File Size: 13 KB
Views Total: 29209
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Serialize Form Data Into JSON Object In jQuery - serializeToJSON

serializeToJSON is a jQuery plugin that serializes a selected form into a JavaScript object and then converts it into a JSON string using the JSON.stringify() method.

How to use it:

1. Include the latest version of jQuery library and jQuery serializeToJSON plugin's script on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.serializeToJSON.js"></script>

2. Serialize an html form into a JS object.

var obj = $("form").serializeToJSON({
    // options here  
});

3. Convert the JavaScript object to a JSON string.

var jsonString = JSON.stringify(obj);

4. Output the serialized form data.

$("#result").val(jsonString);

5. Default options available.

var obj = $("form").serializeToJSON({

    // serialize the form using the Associative Arrays
    associativeArrays: true,

    // convert "true" and "false" to booleans true / false
    parseBooleans: true,
    parseFloat: {

      // the value can be a string or function
      condition: undefined,

      // auto detect NaN value and changes the value to zero
      nanToZero: true,

      // return the input value without commas
      getInputValue: function($input){
        return $input.val().split(",").join("");
      }
    }
    
});

Changelog:

v1.4.1 (2019-10-11)

  • Fixed an issue when use input hidden with input checkbox

2016-11-28

  • bugfix

2016-11-09

  • bugfix

2016-10-20

  • v1.2.0: bugfix

2016-10-04

  • Fix: Checkbox support

2016-09-03

  • Bugfix

This awesome jQuery plugin is developed by raphaelm22. For more Advanced Usages, please check the demo page or visit the official website.