# .serialize()

## serialize ( ) Returns: String version added: 1.0

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

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:

    $( "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.

## Examples:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css 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="//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: