jQuery .serializeArray() Method

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

What Is .serializeArray()?

.serializeArray() (since jQuery 1.2) encodes successful form controls as an array of { name, value } objects — ready to inspect, filter, or pass to $.param(). It takes no arguments and returns an Array.

Remember
$("form").serializeArray()
// → [ { name: "a", value: "1" }, { name: "b", value: "2" } ]

// Prefer the <form> itself (not form + children)
// Same successful-control rules as .serialize()
// $.param(arr) === $("form").serialize()
NeedUse
Form → name/value array$("form").serializeArray()
Form → query string.serialize()
Array → query string$.param(arr)
Ajax POST body$.post(url, $.param(arr))
File uploadsFormData + $.ajax()
Approach

How to Use .serializeArray()

Select the form, call .serializeArray(), then inspect or transform the array.

  1. Give every field you care about a name attribute.
  2. Select the <form> (or a set of controls) with jQuery.
  3. Call .serializeArray() to get [{ name, value }, …].
  4. Iterate with $.each, filter/push entries, or map to a plain object.
  5. Optionally call $.param(arr) for a query string / Ajax body.
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—Array of { name, value }

Pseudocode

Pseudocode
call $(formOrControls).serializeArray()

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

result = []
for each successful control:
    result.push({ name: control.name, value: control.value || "" })

return result
// e.g. [ { name: "a", value: "1" }, { name: "b", value: "2" } ]
Reference

Cheat Sheet

Keep these facts handy while building Ajax forms.

TopicDetail
Syntax.serializeArray() — no arguments
ReturnsArray of { name, value }
SincejQuery 1.2
Best selector$("form") or $(this) in submit
IncludedNamed, enabled, successful controls
ExcludedNo name · disabled · unchecked · files · submit
To string$.param($("form").serializeArray())
Related.serialize() · $.param()
Try it

Live Preview

Change the form controls and watch .serializeArray() update the name/value list.

Edits update the array automatically. Click Run or a chip anytime.

Result
Ready — change a field or click Run.
Code

jQuery Examples

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

Example 1 — Basic Array on Submit

Official idea: prevent navigation and log the name/value array.

jQuery
$("#demo").on("submit", function (event) {
  event.preventDefault();
  var fields = $(this).serializeArray();
  $("#json-out").text(JSON.stringify(fields, null, 2));
});
Try It Yourself

How It Works

  1. Intercept. The submit handler runs before navigation.
  2. Stop reload. preventDefault() keeps the user on the page.
  3. Read. .serializeArray() builds the name/value array.
  4. Show. JSON.stringify makes the array easy to inspect.

Example 2 — Iterate with $.each

Docs-style demo: rebuild a live results list from field.name and field.value.

jQuery
function showValues() {
  $("#results").empty();
  $.each($("form").serializeArray(), function (i, field) {
    $("#results").append(field.name + "=" + field.value + " ");
  });
}

$("input, select").on("click change", showValues);
showValues();
Try It Yourself

How It Works

  1. Read. Each event calls .serializeArray() again.
  2. Loop. $.each walks every { name, value } entry.
  3. Display. Append each pair to the results area.
  4. Learn. Great for seeing which controls are “successful”.

Example 3 — $.param(serializeArray()) Equals .serialize()

Prove the official equivalence: both produce the same query string.

jQuery
var $f = $("#demo-form");
var fromArray = $.param($f.serializeArray());
var fromSerialize = $f.serialize();

$("#match").text(fromArray === fromSerialize ? "Match!" : "Mismatch!");
$("#string").text(fromSerialize);
Try It Yourself

How It Works

  1. Array path. Build the array, then encode with $.param().
  2. String path. .serialize() does that pipeline internally.
  3. Same rules. Both use identical successful-control filtering.
  4. When. Prefer the array when you need to edit fields first.

Example 4 — Transform Before Encoding

Filter empty fields and append a token, then $.param() for POST.

jQuery
$("#save").on("click", function () {
  var data = $("#profile-form").serializeArray();
  data = data.filter(function (f) {
    return f.value.trim() !== "";
  });
  data.push({ name: "_token", value: "abc123" });
  $("#out").text("POST body: " + $.param(data));
});
Try It Yourself

How It Works

  1. Read. Start from the live form array.
  2. Filter. Remove entries you do not want to send.
  3. Augment. Push extra fields (tokens, flags) as objects.
  4. Encode. $.param(data) builds the Ajax body string.

Example 5 — Map to a Plain Object

Convert the array into a flat object for JSON.stringify APIs.

jQuery
function arrayToObject(fields) {
  var obj = {};
  fields.forEach(function (f) {
    obj[f.name] = f.value;
  });
  return obj;
}

$("#run").on("click", function () {
  var payload = arrayToObject($("#signup-form").serializeArray());
  $("#json").text(JSON.stringify(payload, null, 2));
});
Try It Yourself

How It Works

  1. Array first. .serializeArray() gives per-field entries.
  2. Map. Copy each name → value onto a plain object.
  3. Note. Duplicate names overwrite — keep the array for multi-selects.
  4. Send. Use JSON.stringify(payload) with a JSON content type.

Edge Cases & Pitfalls

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

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.

multi

Duplicate names stay as separate entries

Multi-selects produce multiple objects with the same name. Mapping to a plain object overwrites earlier values.

Compatibility

Browser Support

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

✓ Stable · jQuery 1.2+

jQuery .serializeArray()

Supported across jQuery 1.x, 2.x, and 3.x. Prefer a current jQuery 3.x build. Output is a plain JavaScript array of objects.

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
.serializeArray() Universal

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

Analysis

Performance Notes

ApproachCostBest for
.serializeArray() on submitCheapTypical contact / filter forms
Live serialize on every keystrokeFine for small formsDebounce on huge forms
Map array → object + JSONCheapJSON APIs (watch duplicate names)

Building the array 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 → array of { name, value } for inspect/transform.
  • Call: $("form").serializeArray() — no arguments, returns an Array.
  • Rules: name + successful controls only; no files / disabled / unchecked.
  • Related: .serialize() for strings; $.param(arr) after transforms.

One line: .serializeArray() turns a form’s successful controls into a name/value array — select the form, transform if needed, then $.param() or JSON.

Frequently Asked Questions

jQuery .serializeArray() encodes successful form controls as an array of plain objects — each with name and value properties. Call $("form").serializeArray() to get [{ name: "email", value: "[email protected]" }, …]. It takes no arguments and returns an Array, not a string.
.serializeArray() returns an array of { name, value } objects. .serialize() returns the same data as one URL query string. They use the same successful-control rules. Note: $(form).serialize() equals $.param($(form).serializeArray()).
Same rules as native HTML form submit: each control needs a name and must not be disabled. Checkboxes and radios appear only when checked. File inputs and submit button values are excluded. Missing value attributes become an empty string.
Yes — that is what .serialize() does internally. $.param($("form").serializeArray()) produces the same string as $("form").serialize(). You can modify the array first, then call $.param().
Yes — JSON.stringify($("form").serializeArray()) is valid JSON. Many APIs expect a flat object instead; map the array with a loop or reduce. For uploads use FormData, not serializeArray.
Prefer $("form").serializeArray(). Selecting both the form and its children in one set can duplicate entries. You may select individual controls when they are not inside a form.

Next: ajaxStart event

Show a page-wide loading indicator when the first Ajax request begins.

ajaxStart 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 .serialize() Method jQuery ajaxStart Event