## .serialize()Returns: String

Description: Encode a set of form elements as a string for submission.

- #### version added: 1.0.serialize()

  - This method does not accept any arguments.

The `.serialize()` 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 `<input>`, `<textarea>`, and `<select>`: `$( "input, textarea, select" ).serialize();`

It is typically easier, however, to select the `<form>` itself for serialization:

1 2 3 4 |
    $( "form" ).on( "submit", function( event ) {  event.preventDefault();  console.log( $( this ).serialize() );});

In this case, jQuery serializes the successful controls within the form. Only `form` 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 `.serialize()` method. Selecting both the form and its children in a set will cause duplicates in the serialized string.

Note: Only "successful controls" 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 `name` attribute. Values from checkboxes and radio buttons (`input`s of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

## Example:

Serialize a form to a query string that could be sent to a server in an Ajax request.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>serialize demo</title>  <style>  body, select {    font-size: 12px;  }  form {    margin: 5px;  }  p {    color: red;    margin: 5px;    font-size: 14px;  }  b {    color: blue;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <form>  <select name="single">    <option>Single</option>    <option>Single2</option>  </select>   <br>  <select name="multiple" multiple="multiple">    <option selected="selected">Multiple</option>    <option>Multiple2</option>    <option selected="selected">Multiple3</option>  </select>   <br>  <input type="checkbox" name="check" value="check1" id="ch1">  <label for="ch1">check1</label>  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">  <label for="ch2">check2</label>   <br>  <input type="radio" name="radio" value="radio1" checked="checked" id="r1">  <label for="r1">radio1</label>  <input type="radio" name="radio" value="radio2" id="r2">  <label for="r2">radio2</label></form> <p><tt id="results"></tt></p> <script>  function showValues() {    var str = $( "form" ).serialize();    $( "#results" ).text( str );  }  $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );  $( "select" ).on( "change", showValues );  showValues();</script> </body></html>

#### Demo: