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
Array
butAssociative Arrays
. -
parseBooleans: true, automatically detect and convert strings
"true"
and"false"
to booleanstrue / false
. -
parseFloat.condition: undefined, the value can be a
string
orfunction
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
NaN
value 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.defaults
Contributions
Contributions are always welcome.
Author
Written and maintained by Raphael Nunes