jQuery AJAX Form Data Serialization Methods

jQuery AJAX Form Data Serialization

When submitting forms via AJAX, jQuery offers built-in serialization tools that prepare input data for seamless transmission to the server. These methods ensure your form fields are efficiently encoded, allowing you to send structured data without manual formatting.

Why Use Form Serialization?

• Prepares form data for AJAX-based requests automatically
• Eliminates the need to manually extract input values
• Ensures data is URL-encoded or structured for processing
• Simplifies integration with server-side scripts

jQuery Form Data Serialization Methods

jQuery offers two built-in serialization methods to efficiently prepare form data for AJAX requests.

1. serialize() – Converts a form’s inputs into a URL‑encoded string ready for submission in a query string or POST body.
2. serializeArray() – Produces an array of objects, each with name and value properties, representing the form’s input fields.

jQuery serialize() Method

The jQuery serialize() method gathers all enabled form elements and builds a single URL‑encoded string, ideal for appending to a request’s query string or sending in the request body.

What is serialize() Method?

The serialize() method traverses a form’s inputs (text, checkbox, radio, select, textarea) and returns their names and values in a URL‑encoded format, e.g. "name=John&email=john%40example.com".

• Includes only successful controls (excluding disabled elements)
• Encodes characters to meet URL encoding rules (%20 for spaces, etc.)
• Ideal for GET requests or as the POST body when using application/x‑www‑form‑urlencoded
• Skips unchecked checkboxes and radio buttons by default
• Works on any jQuery form selection: $('form').serialize()

Syntax of serialize() Method

The serialize() method is called on a jQuery form selection and returns a string.

var encodedString = $('#myForm').serialize();

Serialize Form on Submit

This example intercepts a form’s submit event, serializes its data, and sends it via AJAX.

$(function () {
	$('#userForm').on('submit', function (e) {
		const formData = $(this).serialize();
		$.ajax({
			url: 'jquery-serialize.php',
			type: 'POST',
			data: formData,
			success: function (response) {
				$('#response').html(response);
			},
			error: function () {
				$('#response').html('Error submitting form.');
			}
		});
	});
});

Serialized Form Data

Serialized form data using serialize() method may look like this:

name=john%20doe&email=johndoe%40example.com&city=New%20York

PHP File to Handle Serialized Form Data

The remote jquery-serialize.php file (or any backend script) is required to receive and process the data submitted using jQuery's serialize() method.

<?php
// Check if expected form fields exist
if (!empty($_POST)) {
    // Sanitize input values
    $name  = isset($_POST['name']) ? htmlspecialchars(trim($_POST['name'])) : 'N/A';
    $email = isset($_POST['email']) ? htmlspecialchars(trim($_POST['email'])) : 'N/A';
    $city  = isset($_POST['city']) ? htmlspecialchars(trim($_POST['city'])) : 'N/A';
    // Output response
    echo "<strong>Form Submitted Successfully!</strong><br>";
    echo "Name: $name<br>";
    echo "Email: $email<br>";
    echo "City: $city";
} else {
    echo "No form data received.";
}
?>

jQuery serializeArray() Method

The serializeArray() method returns an array of objects with name and value pairs, ideal for preparing form input data for custom handling.

What is serializeArray() Method?

The serializeArray() method loops through form controls and produces an array like [{"name":"username","value":"alice"}], including multiple entries for repeated names.

• Includes all successful controls, preserving order in the DOM
• Returns JavaScript objects, no URL encoding applied
• Useful when you need to inspect or modify values before dispatch
• Handles checkboxes, selects, and multiple-value fields gracefully
• Invoked via $('form').serializeArray()

Syntax of serializeArray() Method

Call serializeArray() on a jQuery form selection to get an array of name/value pairs.

var dataArray = $('#myForm').serializeArray();

Serialize Array on Submit

This example captures the form submission, converts inputs into an array of objects using serializeArray(), and sends the result with an AJAX request.

$(function () {
	$('#userForm').on('submit', function (e) {
		const formArray = $(this).serializeArray();
		$.ajax({
			url: 'jquery-serialize.php',
			type: 'POST',
			data: formArray,
			success: function (response) {
				$('#response').html(response);
			},
			error: function () {
				$('#response').html('Error submitting form.');
			}
		});
	});
});

Serialized Form Data in Array

Serialized form data using serializeArray() method may look like this:

[{"name":"name","value":"John Doe"},{"name":"email","value":"johndoe@example.com"},{"name":"city","value":"New York"}]

jQuery AJAX Reference

For a complete overview of all jQuery AJAX methods, visit the jQuery AJAX Reference.