jquery.serializeJSON

Adds the method .serializeJSON() to jQuery (or Zepto) that serializes a form into a JavaScript Object, using the same format as the default Ruby on Rails request params.

Install

Install with bower bower install jquery.serializeJSON, or npm npm install jquery-serializejson, or just download the jquery.serializejson.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.serializejson.js"></script>

Usage Example

HTML form:

<form>  <input type="text" name="title" value="Finding Loot"/>  <input type="text" name="author[name]" value="John Smith"/>  <input type="text" name="author[job]"  value="Legendary Pirate"/></form>

JavaScript:

$('form').serializeJSON();// returns =>{  title: "Finding Loot",  author: {    name: "John Smith",    job: "Legendary Pirate"  }}

Form input, textarea and select tags are supported. Nested attributes and arrays can be specified by using the attr[nested][nested] syntax.

HTML form:

<form id="my-profile">  <!-- simple attribute -->  <input type="text" name="fullName"              value="Mario Izquierdo" />  <!-- nested attributes -->  <input type="text" name="address[city]"         value="San Francisco" />  <input type="text" name="address[state][name]"  value="California" />  <input type="text" name="address[state][abbr]"  value="CA" />  <!-- array -->  <input type="text" name="jobbies[]"             value="code" />  <input type="text" name="jobbies[]"             value="climbing" />  <!-- nested arrays, textareas, checkboxes ... -->  <textarea              name="projects[0][name]">serializeJSON</textarea>  <textarea              name="projects[0][language]">javascript</textarea>  <input type="hidden"   name="projects[0][popular]" value="0" />  <input type="checkbox" name="projects[0][popular]" value="1" checked />  <textarea              name="projects[1][name]">tinytest.js</textarea>  <textarea              name="projects[1][language]">javascript</textarea>  <input type="hidden"   name="projects[1][popular]" value="0" />  <input type="checkbox" name="projects[1][popular]" value="1"/>  <!-- select -->  <select name="selectOne">    <option value="paper">Paper</option>    <option value="rock" selected>Rock</option>    <option value="scissors">Scissors</option>  </select>  <!-- select multiple options, just name it as an array[] -->  <select multiple name="selectMultiple[]">    <option value="red"  selected>Red</option>    <option value="blue" selected>Blue</option>    <option value="yellow">Yellow</option>	</select></form>

JavaScript:

$('#my-profile').serializeJSON();// returns =>{  fullName: "Mario Izquierdo",  address: {    city: "San Francisco",    state: {      name: "California",      abbr: "CA"    }  },  jobbies: ["code", "climbing"],  projects: {    '0': { name: "serializeJSON", language: "javascript", popular: "1" },    '1': { name: "tinytest.js",   language: "javascript", popular: "0" }  },  selectOne: "rock",  selectMultiple: ["red", "blue"]}

The serializeJSON function returns a JavaScript object, not a JSON String. The plugin should probably have been called serializeObject or similar, but those plugins already existed.

To convert into a JSON String, use the JSON.stringify method, that is available on all major new browsers. If you need to support very old browsers, just include the json2.js polyfill (as described on stackoverfow).

var obj = $('form').serializeJSON();var jsonString = JSON.stringify(obj);

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。