1 line
4.1 KiB
JSON
1 line
4.1 KiB
JSON
{"name":"serializeArray","type":"method","title":".serializeArray()","deprecated":null,"removed":null,"desc":"Encode a set of form elements as an array of names and values.","categories":["forms","ajax/helper-functions","version/1.2"],"entries":[{"return":"Array","signatures":{"added":"1.2"},"examples":{"desc":"Get the values from a form, iterate through them, and append them to a results display.","code":"\n function showValues() {\n var fields = $( \":input\" ).serializeArray();\n $( \"#results\" ).empty();\n jQuery.each( fields, function( i, field ) {\n $( \"#results\" ).append( field.value + \" \" );\n });\n }\n\n $( \":checkbox, :radio\" ).click( showValues );\n $( \"select\" ).change( showValues );\n showValues();\n","css":"\n body, select {\n font-size: 14px;\n }\n form {\n margin: 5px;\n }\n p {\n color: red;\n margin: 5px;\n }\n b {\n color: blue;\n }\n","html":"\n<p><b>Results:</b> <span id=\"results\"></span></p>\n<form>\n <select name=\"single\">\n <option>Single</option>\n <option>Single2</option>\n </select>\n <select name=\"multiple\" multiple=\"multiple\">\n <option selected=\"selected\">Multiple</option>\n <option>Multiple2</option>\n <option selected=\"selected\">Multiple3</option>\n </select>\n <br>\n <input type=\"checkbox\" name=\"check\" value=\"check1\" id=\"ch1\">\n <label for=\"ch1\">check1</label>\n <input type=\"checkbox\" name=\"check\" value=\"check2\" checked=\"checked\" id=\"ch2\">\n <label for=\"ch2\">check2</label>\n <input type=\"radio\" name=\"radio\" value=\"radio1\" checked=\"checked\" id=\"r1\">\n <label for=\"r1\">radio1</label>\n <input type=\"radio\" name=\"radio\" value=\"radio2\" id=\"r2\">\n <label for=\"r2\">radio2</label>\n</form>\n"},"longdesc":"\n <p>The <code>.serializeArray()</code> method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:</p>\n <pre><code>\n<form>\n <div><input type=\"text\" name=\"a\" value=\"1\" id=\"a\"></div>\n <div><input type=\"text\" name=\"b\" value=\"2\" id=\"b\"></div>\n <div><input type=\"hidden\" name=\"c\" value=\"3\" id=\"c\"></div>\n <div>\n <textarea name=\"d\" rows=\"8\" cols=\"40\">4</textarea>\n </div>\n <div><select name=\"e\">\n <option value=\"5\" selected=\"selected\">5</option>\n <option value=\"6\">6</option>\n <option value=\"7\">7</option>\n </select></div>\n <div>\n <input type=\"checkbox\" name=\"f\" value=\"8\" id=\"f\">\n </div>\n <div>\n <input type=\"submit\" name=\"g\" value=\"Submit\" id=\"g\">\n </div>\n</form>\n </code></pre>\n <p>The <code>.serializeArray()</code> method uses the standard W3C rules for <a href=\"http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2\">successful controls</a> to determine which elements it should include; in particular the element cannot be disabled and must contain a <code>name</code> attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized.</p>\n <p>This method can act on a jQuery object that has selected individual form elements, such as <code><input></code>, <code><textarea></code>, and <code><select></code>. However, it is typically easier to select the <code><form></code> tag itself for serialization:</p>\n <pre><code>\n$( \"form\" ).submit(function( event ) {\n console.log( $( this ).serializeArray() );\n event.preventDefault();\n});\n </code></pre>\n <p>This produces the following data structure (provided that the browser supports <code>console.log</code>):</p>\n <pre><code>\n[\n {\n name: \"a\",\n value: \"1\"\n },\n {\n name: \"b\",\n value: \"2\"\n },\n {\n name: \"c\",\n value: \"3\"\n },\n {\n name: \"d\",\n value: \"4\"\n },\n {\n name: \"e\",\n value: \"5\"\n }\n]\n </code></pre>\n "}]} |