🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

json form-serialize

Documentation

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 but Associative Arrays.

  • parseBooleans: true, automatically detect and convert strings "true" and "false" to booleans true / false.

  • parseFloat.condition: undefined, the value can be a string or function

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


You May Also Like