control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/serialize.json

{"name":"serialize","type":"method","title":".serialize()","deprecated":null,"removed":null,"desc":"Encode a set of form elements as a string for submission.","categories":["forms","ajax/helper-functions","version/1.0"],"entries":[{"return":"String","signatures":{"added":"1.0"},"examples":{"desc":"Serialize a form to a query string that could be sent to a server in an Ajax request.","code":"\n  function showValues() {\n    var str = $( \"form\" ).serialize();\n    $( \"#results\" ).text( str );\n  }\n  $( \"input[type='checkbox'], input[type='radio']\" ).on( \"click\", showValues );\n  $( \"select\" ).on( \"change\", showValues );\n  showValues();\n","css":"\n  body, select {\n    font-size: 12px;\n  }\n  form {\n    margin: 5px;\n  }\n  p {\n    color: red;\n    margin: 5px;\n    font-size: 14px;\n  }\n  b {\n    color: blue;\n  }\n","height":"200","html":"\n<form>\n  <select name=\"single\">\n    <option>Single</option>\n    <option>Single2</option>\n  </select>\n\n  <br>\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\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\n  <br>\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\n<p><tt id=\"results\"></tt></p>\n"},"longdesc":"\n    <p>The <code>.serialize()</code> method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code>: <code>$( \"input, textarea, select\" ).serialize();</code></p>\n    <p>It is typically easier, however, to select the <code>&lt;form&gt;</code> itself for serialization:</p>\n    <pre><code>\n$( \"form\" ).on( \"submit\", function( event ) {\n  event.preventDefault();\n  console.log( $( this ).serialize() );\n});\n    </code></pre>\n    <p>In this case, jQuery serializes the successful controls within the form. Only <code>form</code> elements are examined for inputs they contain, in all other cases the input elements to be serialized should be part of the set passed to the <code>.serialize()</code> method. Selecting both the form and its children in a set will cause duplicates in the serialized string.</p>\n    <p>Note: Only <a href=\"http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2\">\"successful controls\"</a> are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a <code>name</code> attribute. Values from checkboxes and radio buttons (<code>input</code>s of type \"radio\" or \"checkbox\") are included only if they are checked. Data from file select elements is not serialized.</p>\n  "}]}