jquery.serializeToJSON
Adds the method .serializeToJSON() to jQuery that Serialize an HTML form (familiar with ASP MVC) to a JavaScript object, supporting nested attributes and arrays.
Install
Install with bower bower install jquery.serializeToJSON, or npm npm install jquery-serializetojson', or just download the jquery.serializetojson.js script.
And make sure it is included after jQuery, for example:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializeToJSON.js"></script>Usage Example
HTML form (input, textarea and select tags supported):
<!-- Example of form similar to Razor (ASP MVC) --> <form id="myForm"> <div class="form-group"> <label>Name</label> <input type="text" name="Customer.FullName" class="form-control" /> </div> <div class="form-group"> <label>e-mail</label> <input type="text" name="Customer.Email" class="form-control" /> </div> <div class="form-group"> <label>Payment</label> <select name="Payment" class="form-control"> <option value="">Select payment...</option> <option value="1">Credit Card</option> <option value="2">Cash</option> </select> </div> <div class="form-group"> <label>Credit Card Company</label> <select name="CreditCardCompany" multiple class="form-control"> <option value="Company A">Company A</option> <option value="Company B">Company B</option> <option value="Company C">Company C</option> </select> </div> <div class="form-group"> <label>New Customer?</label> <div class="radio"> <label> <input type="radio" name="IsNewCustomer" value="True" /> Yes </label> <label> <input type="radio" name="IsNewCustomer" value="False" /> No </label> </div> </div> <div class="form-group"> <label>Marketing: </label> <div class="checkbox"> <label> <input type="checkbox" name="ReceiveEmailPartner" value="true" /> You agree to receive e-mail partner? <input type="hidden" name="ReceiveEmailPartner" value="false" /> </label> <label> <input type="checkbox" name="ReceiveSMSPartner" value="true" /> You agree to receive SMS partner? <input type="hidden" name="ReceiveSMSPartner" value="false" /> </label> </div> </div> <table> <thead> <tr> <th>Product ID</th> <th>Name</th> <th>Quantity</th> <th>Cost</th> </tr> </thead> <tbody> <tr> <td><input type="text" value="54457" name="Product[0].ID" class="number" /></td> <td><input type="text" value="Smartphone" name="Product[0].Name" /></td> <td><input type="text" value="5" name="Product[0].Quantity" class="number" /></td> <td><input type="text" value="1,054.99" name="Product[0].Cost" class="money" /></td> </tr> <tr> <td><input type="text" value="97518" name="Product[1].ID" class="number" /></td> <td><input type="text" value="iPad" name="Product[1].Name" /></td> <td><input type="text" value="3" name="Product[1].Quantity" class="number" /></td> <td><input type="text" value="2,119.99" name="Product[1].Cost" class="money" /></td> </tr> </tbody> </table> </form> JavaScript:
var obj = $("#myForm").serializeToJSON({ parseFloat: { condition: ".number,.money" } }); // obj => { Customer: { FullName: "Raphael Nunes", Email: "[email protected]" }, Payment: "1", CreditCardCompany: [ "Company A", "Company C" ], IsNewCustomer: true, ReceiveEmailPartner: false, ReceiveSMSPartner: false, Product: { 0: { ID: 54457, Name: "Smartphone", Quantity: 5, Cost: 1,054.99 }, 1: { ID: 97518, Name: "iPad", Quantity: 3, Cost: 2,119.99 } } } var objNotAssociativeArrays = $("#myForm").serializeToJSON({associativeArrays: false}); // objNotAssociativeArrays => { Customer: { "FullName": "Raphael Nunes", "Email": "[email protected]" }, Payment: "1", CreditCardCompany: [ "Company A", "Company C" ], IsNewCustomer: true, ReceiveEmailPartner: false, ReceiveSMSPartner: false, Product: [ { ID: "54457", Name: "Smartphone", Quantity: "5", Cost: "1,054.99" }, { ID: "97518", Name: "iPad", Quantity: "3", Cost: "2,119.99" } ] }The function serializeToJSON return a JavaScript object, not a JSON string.
If you want a chain a JSON string then use JSON.stringify To support old browsers, just include the json2.js polyfill (as described on stackoverfow).
var obj = $("#myForm").serializeToJSON(); var jsonString = JSON.stringify(obj);Note that .serializeToJSON () uses the return of jQuery's method [.serializeArray ()] (https://api.jquery.com/serializeArray/) to create the serialized object. So if the return is not desired, first check that that was returned by the [.serializeArray ()] (https://api.jquery.com/serializeArray/) method.
Options
To change the default options, simply enter the desired options via parameter of the method .serializeToJSON ().
To change the default behavior you use the following options:
-
associativeArrays: true, by default, the method does not serialize using the
ArraybutAssociative Arrays. -
parseBooleans: true, automatically detect and convert strings
"true"and"false"to booleanstrue / false. -
parseFloat.condition: undefined, the value can be a
stringorfunction
string: filter used in the function [jQuery().is('condition')] (http://api.jquery.com/is/) to detect and convert into float / number. Example: ".number" or "[mask='money']".
function: the return of function sets when the convert occur. example:
function(i) { var v = i.val().split(",").join(""); return !isNaN(Number(v)); // In this case, conversion will always occur when possible }-
parseFloat.nanToZero: true, automatically detect
NaNvalue and changes the value to zero. -
parseFloat.getInputValue:
function(){}, By default, returns the input value without commas, not an error occurs in conversion. if your location uses comma for decimal separation, for example in German or Brazil, you can change to:
function(i){ return i.val().split(".").join("").replace(",", "."); }Defaults
All options defaults are defined in $.serializeToJSON.defaultOptions. You can just modify it to avoid setting the option on every call to serializeToJSON.
For example:
$.fn.serializeToJSON.defaults.parseBooleans = false; // not parse booleans by default $.fn.serializeToJSON.defaults.associativeArrays = false; // not use associative array by default $("#myForm").serializeToJSON(); // No options => then use $.fn.serializeToJSON.defaultsContributions
Contributions are always welcome.
Author
Written and maintained by Raphael Nunes
