jQuery .serialize() Method

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .serialize()?

.serialize() (since jQuery 1.0) encodes successful form controls as a URL-encoded query string — ready for $.post(), $.ajax(), or a GET URL. It takes no arguments and returns a String.

Remember
$("form").serialize()
// → "name=Jane&email=jane%40example.com"

// Prefer the <form> itself (not form + children)
// Only successful controls (name + checked/enabled rules)
// File inputs are never included
NeedUse
Form → query string$("form").serialize()
Form → name/value array.serializeArray()
Object → query string$.param(obj)
Ajax POST body$.post(url, $form.serialize())
File uploadsFormData + $.ajax() (not serialize)
Approach

How to Use .serialize()

Select the form, call .serialize(), then send or display the string.

  1. Give every field you care about a name attribute.
  2. Select the <form> (or a set of controls) with jQuery.
  3. Call .serialize() to get a URL-encoded string.
  4. Pass that string to $.post() / $.ajax(), or show it for debugging.
  5. On submit handlers, call event.preventDefault() if you are using Ajax.
PieceRequired?Role
Matched setYesA <form> or form controls to read
name on controlsYes (to include)Nameless fields are skipped
ArgumentsNoneMethod takes no parameters
Return value—URL-encoded String

Pseudocode

Pseudocode
call $(formOrControls).serialize()

find successful controls in the set:
    must have a name attribute
    skip disabled controls
    skip unchecked checkboxes / radios
    skip file inputs
    skip submit button values

for each successful control:
    encode name and value
    join with "&"

return query string
// e.g. "a=1&b=two%20words"
Reference

Cheat Sheet

Keep these facts handy while building Ajax forms.

TopicDetail
Syntax.serialize() — no arguments
ReturnsString (URL-encoded)
SincejQuery 1.0
Best selector$("form") or $(this) in submit
IncludedNamed, enabled, successful controls
ExcludedNo name · disabled · unchecked · files · submit
DuplicatesDo not select form and its children together
Related.serializeArray() · $.param()
Try it

Live Preview

Change the form controls and watch .serialize() update the query string.

Edits update the string automatically. Click Run or the serialize chip anytime.

Result
Ready — change a field or click Serialize.
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Serialize on submit

Official pattern: prevent navigation and read the query string.

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

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

  // Optional: $.post($(this).attr("action"), data);
});
Try It Yourself

How It Works

  1. Intercept. The submit handler runs before the browser navigates.
  2. Stop reload. preventDefault() keeps the user on the page.
  3. Serialize. $(this).serialize() reads named successful controls.
  4. Use. Show the string or send it with $.post().

Example 2 — Live Preview on Change

Adapted from the jQuery docs demo: update the string as controls change.

jQuery
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();
Try It Yourself

How It Works

  1. Bind. Listen for click / change / input on controls.
  2. Read. Each event calls $("form").serialize() again.
  3. Reflect. The string always matches the current DOM state.
  4. Debug. Great for learning which fields are “successful”.

Example 3 — $.post(url, $form.serialize())

Pass the serialized string as the POST body — common Ajax form pattern.

jQuery
$("#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"
  );
});
Try It Yourself

How It Works

  1. Build string. .serialize() creates form-urlencoded data.
  2. POST. The second argument to $.post() is that string.
  3. Send as-is. jQuery posts it as the request body.
  4. Handle. The success callback receives the server response.

Example 4 — Successful Controls Rules

See what is included: name required, unchecked/disabled skipped.

jQuery
// Included: named text, checked checkbox, selected radio
// Excluded: no name, unchecked box, disabled field, file inputs

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

// Example:
// "single=Alpha&check1=on&radio=second"
// (disabled field is NOT present)
Try It Yourself

How It Works

  1. Name. Without name, a control never appears.
  2. Checked. Radios/checkboxes need to be checked.
  3. Enabled. Disabled fields are always omitted.
  4. Files. Use FormData for uploads — not .serialize().

Example 5 — Multi-Select & Duplicate Avoidance

Selected options repeat the same key. Select the form only — not form plus inputs.

jQuery
// Correct — one form, no duplicates
var correct = $("#tags-form").serialize();
// → tags=js&tags=jquery&tags=ajax

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

$("#correct").text(correct);
$("#wrong").text(wrong);
Try It Yourself

How It Works

  1. Multi-select. Each chosen option adds another tags=… pair.
  2. Form only. Serializing the form walks its controls once.
  3. Bug. Form + children selects the same controls twice.
  4. Rule. Prefer $("form") or $(this) in submit handlers.

Edge Cases & Pitfalls

Check these when a field is “missing” from your string.

name

No name → never included

Every successful control must have a name attribute or it is skipped.

checked

Unchecked radios/checkboxes omitted

Same as a normal browser form submit — only checked ones appear.

files

File inputs are not serialized

Use FormData with processData: false and contentType: false.

selector

Form + children causes duplicates

Do not serialize $("form, form :input"). Select the form alone.

submit

Submit button values are not included

.serialize() never adds the clicked submit button’s name/value pair.

Compatibility

Browser Support

.serialize() has been part of jQuery since 1.0. It works in every browser that runs your loaded jQuery version — no separate browser feature flag.

✓ Stable · jQuery 1.0+

jQuery .serialize()

Supported across jQuery 1.x, 2.x, and 3.x. Prefer a current jQuery 3.x build. Encoding follows standard application/x-www-form-urlencoded rules.

100% With jQuery
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.serialize() Universal

Bottom line: Safe for everyday form Ajax. Give fields names, select the form only, and use FormData for files.

Analysis

Performance Notes

ApproachCostBest for
.serialize() on submitCheapTypical contact / filter forms
Live serialize on every keystrokeFine for small formsDebounce on huge forms
Huge multi-select formsCost grows with fieldsStill usually fine vs network time

Serialization is cheap compared with the network request. Prefer serialize-on-submit for production; live preview is mainly for learning/debug.

Remember

Key Takeaways

  • Role: form → URL-encoded string for Ajax / query URLs.
  • Call: $("form").serialize() — no arguments, returns a String.
  • Rules: name + successful controls only; no files / disabled / unchecked.
  • Related: .serializeArray() for objects; $.param() for plain data.

One line: .serialize() turns a form’s successful controls into a query string — select the form, give fields names, and POST the result.

Frequently Asked Questions

jQuery .serialize() encodes successful form controls in the matched set as a URL-encoded query string (for example "name=John&email=john%40example.com"). Call $("form").serialize() to read current field values without a full page submit. Returns a String and takes no arguments.
.serialize() returns one URL-encoded string. .serializeArray() returns an array of { name, value } objects. Use .serialize() for Ajax POST bodies and query strings; use .serializeArray() when you need to inspect or transform fields in JavaScript first.
Only successful controls are included — matching HTML form submission rules. Each control needs a name attribute. Checkboxes and radios are included only when checked. Disabled controls and file inputs are excluded. Submit button values are not included by .serialize().
Prefer selecting the form: $("form").serialize(). jQuery finds successful controls inside it. Selecting both the form and its children in one set causes duplicate keys in the string.
.serialize() reads live DOM values (via .serializeArray()) and builds a string with $.param() under the hood. Use .serialize() for HTML forms; use $.param() for plain objects or name/value arrays you already have.
No. File input data is never included. For uploads use FormData with $.ajax({ processData: false, contentType: false, data: formData }).

Next: .serializeArray() Method

Get an array of name/value objects you can inspect or transform before sending.

.serializeArray() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

jQuery.param() Method jQuery .serializeArray() Method