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