jQuery .serialize() Method

What You’ll Learn

.serialize() turns live form field values into a URL-encoded query string. This tutorial covers the no-argument signature, successful controls rules, the required name attribute, checkbox and radio behavior, why file inputs are excluded, selecting the <form> vs individual inputs, pairing with $.post() and $.ajax(), comparison with .serializeArray() and $.param(), and common Ajax form patterns.

Introduction

Ajax form submission usually starts the same way: read every input, build key=value&key2=value2, send it with $.post(). jQuery collapses that into one call — $( "form" ).serialize(). It walks the successful controls in the matched set, reads their current values, URL-encodes them, and returns a single string ready for an Ajax request body or query string.

Under the hood, jQuery gathers name/value pairs (the same data .serializeArray() returns) and passes them through $.param(). That means the encoding rules you learned for param — spaces as +, special characters escaped, array bracket notation — apply here automatically. You focus on the form markup; jQuery handles the string.

Understanding .serialize()

.serialize() is a collection method on jQuery objects containing form elements. It accepts no arguments and returns a String in standard URL-encoded notation. It does not mutate the DOM or submit the form — it only reads values.

Only successful controls are included — the same concept browsers use on native form submit. Every included control must have a name attribute. Unchecked checkboxes and radios are omitted. Disabled fields and file inputs are omitted. Submit button values are never serialized by this method.

📝 Syntax

Collection method — .serialize()

jQuery( formElements ).serialize()

No parameters. Returns a URL-encoded string, or an empty string if no successful controls exist.

Typical Ajax form handler

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  var query = $( this ).serialize();
  console.log( query );
  // e.g. "username=john&email=john%40example.com"
  $.post( $( this ).attr( "action" ), query );
} );

Equivalence pipeline

// These produce the same string for a given form state:
$( "form" ).serialize();

$.param( $( "form" ).serializeArray() );

Successful controls checklist

• Must have a name attribute — unnamed inputs are skipped.
• Must not be disabled.
• Checkboxes / radios — included only when checked.
• File inputs — never serialized; use FormData for uploads.
• Submit buttons — not included (form was not submitted via a button).

Return value

• Returns a String — not a jQuery object. Re-wrap with $() if you need chaining on the form.
• Empty string when no successful controls are in the set.

Examples Gallery

Five progressive examples from a basic form serialize through live preview, Ajax POST submission, successful-controls rules, and multiple-select behavior. Each links to a Try-it lab where you can edit and run the code in the browser.

$( "#contact-form" ).on( "submit", function( event ) {
  event.preventDefault();

  var data = $( this ).serialize();
  $( "#output" ).text( data );

  $.post( $( this ).attr( "action" ), data, function( response ) {
    console.log( "Server responded", response );
  } );
} );

User submits form → preventDefault stops navigation

#output shows "name=Jane&email=jane%40example.com&message=Hello"

$.post sends same string as request body

function showValues() {
  var str = $( "form" ).serialize();
  $( "#results" ).text( str || "(empty — no successful controls)" );
}

$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
$( "input[type='text']" ).on( "input", showValues );

showValues();

Toggle checkbox → string updates instantly in #results

Uncheck radio/checkbox → that name drops from string

Change select → new option value appears encoded

$( "#save-form" ).on( "submit", function( event ) {
  event.preventDefault();

  var $form = $( this );

  $.post(
    $form.attr( "action" ),
    $form.serialize(),
    function( data ) {
      $( "#status" ).text( "Saved! Server id: " + data.id );
    },
    "json"
  );
} );

serialize() → "title=My+Post&body=Content&userId=1"

$.post POSTs that string as body (not query string)

Success callback receives parsed JSON response

// Included: named text input, checked checkbox
// Excluded: no name attribute, unchecked radio, disabled field

var str = $( "#demo-form" ).serialize();
$( "#query" ).text( str );

// Typical output when check1 checked, radio2 selected:
// "single=Alpha&check1=on&radio=second&disabled=ignored"
// (disabled field NOT present despite having name)

Input without name → never appears in string

Unchecked checkbox → omitted until checked

Disabled input → always omitted

File input → never serialized

// Correct — one form, no duplicates
var correct = $( "#tags-form" ).serialize();

// Wrong — form AND inputs → duplicate keys in string
var wrong = $( "#tags-form, #tags-form :input" ).serialize();

$( "#correct" ).text( correct );
// tags=js&tags=jquery&tags=ajax  (multiple selected options)

// Prefer correct selector; compare lengths in Try-it lab

Multiple select with 3 options chosen:
tags=js&tags=jquery&tags=ajax

Form + children selector → each field appears twice (bug)

Always serialize $( "form" ) or $( this ) in submit handler

🚀 Common Use Cases

• Ajax form submit — POST serialized data with $.post() instead of full page reload.
• Filter widgets — serialize a filter form and append to a GET URL or pass to $.get().
• Debug panel — live-preview the query string while building complex forms.
• Progressive save — serialize partial forms on blur or timer for auto-save endpoints.
• Legacy PHP/Rails backends — send standard form-encoded bodies servers already parse.
• Pair with .load() — $.post(url, $("form").serialize()) then update a result region.

📝 Notes

• .serialize() accepts no arguments and returns a String, not a jQuery object.
• Every serialized control needs a name attribute — id alone is not enough.
• Submit button values are never included — the form was not submitted via a button.
• File inputs are never serialized — use FormData for uploads.
• Select form only — combining form and inputs duplicates keys.
• Internally equivalent to $.param( $( form ).serializeArray() ).
• HTML5 form controls (email, number, date, etc.) serialize like text inputs when successful.
• For JSON APIs, build a plain object or use JSON.stringify() — not .serialize().

💡 Best Practices