EDUSOHO-ct-21.4.5

jquery.serializeJSON ==================== Adds the method `.serializeJSON()` to [jQuery](http://jquery.com/) (or [Zepto](http://zeptojs.com/)) that serializes a form into a JavaScript Object, using the same format as the default Ruby on Rails request params. Install ------- Install with [bower](http://bower.io/) `bower install jquery.serializeJSON`, or [npm](https://www.npmjs.com/) `npm install jquery-serializejson`, or just download the [jquery.serializejson.js](https://raw.githubusercontent.com/marioizquierdo/jquery.serializeJSON/master/jquery.serializejson.js) script. And make sure it is included after jQuery (or Zepto), for example: ```html <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializejson.js"></script> ``` Usage Example ------------- HTML form (input, textarea and select tags supported): ```html <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" /> <!-- 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: ```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. It should probably have been called `serializeObject`, or something like that, but those names were already taken. To serialize into JSON, use the `JSON.stringify` method, that is available on all major [new browsers](http://caniuse.com/json). To support old browsers, just include the [json2.js](https://github.com/douglascrockford/JSON-js) polyfill (as described on [stackoverfow](http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery)). ```javascript var jsonString = JSON.stringify(obj); ``` Note that `.serializeJSON()` implememtation relies on jQuery's [.serializeArray()](https://api.jquery.com/serializeArray/) to grab the form attributes and then create the object using the names. That means, it will serialize the inputs that are supported by `.serializeArray()`, that uses the standard W3C rules for [successful controls](http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2) to determine which elements it should include. In particular, the included elements cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. And data from file select elements is not serialized. Parse values with :types ------------------------ Parsed values are **strings** by default. But you can force values to be parsed with specific types by appending the type with a colon. ```html <form> <input type="text" name="deftype" value=":string is the default (implicit) type"/> <input type="text" name="text:string" value=":string type can still be used to overrid other parsing options"/> <input type="text" name="excluded:skip" value="Use :skip to not include this field in the result"/> <input type="text" name="numbers[1]:number" value="1"/> <input type="text" name="numbers[1.1]:number" value="1.1"/> <input type="text" name="numbers[other stuff]:number" value="other stuff"/> <input type="text" name="bools[true]:boolean" value="true"/> <input type="text" name="bools[false]:boolean" value="false"/> <input type="text" name="bools[0]:boolean" value="0"/> <input type="text" name="nulls[null]:null" value="null"/> <input type="text" name="nulls[other stuff]:null" value="other stuff"/> <input type="text" name="autos[string]:auto" value="text with stuff"/> <input type="text" name="autos[0]:auto" value="0"/> <input type="text" name="autos[1]:auto" value="1"/> <input type="text" name="autos[true]:auto" value="true"/> <input type="text" name="autos[false]:auto" value="false"/> <input type="text" name="autos[null]:auto" value="null"/> <input type="text" name="autos[list]:auto" value="[1, 2, 3]"/> <input type="text" name="arrays[empty]:array" value="[]"/> <input type="text" name="arrays[list]:array" value="[1, 2, 3]"/> <input type="text" name="objects[empty]:object" value="{}"/> <input type="text" name="objects[dict]:object" value='{"my": "stuff"}'/> </form> ``` ```javascript $('form').serializeJSON(); // returns => { "deftype": "default type is :string", "text": ":string type overrides parsing options", // excluded:skip is not included in the output "numbers": { "1": 1, "1.1": 1.1, "other stuff": NaN, // <-- Other stuff parses as NaN (Not a Number) }, "bools": { "true": true, "false": false, "0": false, // <-- "false", "null", "undefined", "", "0" parse as false }, "nulls": { "null": null, // <-- "false", "null", "undefined", "", "0" parse as null "other stuff": "other stuff" }, "autos": { // works as the parseAll option "string": "text with stuff", "0": 0, // <-- parsed as number "1": 1, // <-- parsed as number "true": true, // <-- parsed as boolean "false": false, // <-- parsed as boolean "null": null, // <-- parsed as null "list": "[1, 2, 3]" // <-- array and object types are not auto-parsed }, "arrays": { // <-- works using JSON.parse "empty": [], "not empty": [1,2,3] }, "objects": { // <-- works using JSON.parse "empty": {}, "not empty": {"my": "stuff"} } } ``` Types can also be specified with the `data-value-type` attribute, instead of the :type notation: ```html <form> <input type="text" name="anumb" data-value-type="number" value="1"/> <input type="text" name="abool" data-value-type="boolean" value="true"/> <input type="text" name="anull" data-value-type="null" value="null"/> <input type="text" name="anauto" data-value-type="auto" value="0"/> </form> ``` Options ------- By default `.serializeJSON()`, with no options works like this: * Values are always **strings** (unless appending :types to the input names) * Unchecked checkboxes are ignored (as defined in the W3C rules for [successful controls](http://www.w3.or