{"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&lt;form&gt;\n  &lt;div&gt;&lt;input type=\"text\" name=\"a\" value=\"1\" id=\"a\"&gt;&lt;/div&gt;\n  &lt;div&gt;&lt;input type=\"text\" name=\"b\" value=\"2\" id=\"b\"&gt;&lt;/div&gt;\n  &lt;div&gt;&lt;input type=\"hidden\" name=\"c\" value=\"3\" id=\"c\"&gt;&lt;/div&gt;\n  &lt;div&gt;\n    &lt;textarea name=\"d\" rows=\"8\" cols=\"40\"&gt;4&lt;/textarea&gt;\n  &lt;/div&gt;\n  &lt;div&gt;&lt;select name=\"e\"&gt;\n    &lt;option value=\"5\" selected=\"selected\"&gt;5&lt;/option&gt;\n    &lt;option value=\"6\"&gt;6&lt;/option&gt;\n    &lt;option value=\"7\"&gt;7&lt;/option&gt;\n  &lt;/select&gt;&lt;/div&gt;\n  &lt;div&gt;\n    &lt;input type=\"checkbox\" name=\"f\" value=\"8\" id=\"f\"&gt;\n  &lt;/div&gt;\n  &lt;div&gt;\n    &lt;input type=\"submit\" name=\"g\" value=\"Submit\" id=\"g\"&gt;\n  &lt;/div&gt;\n&lt;/form&gt;\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>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code>. However, it is typically easier to select the <code>&lt;form&gt;</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  "}]}