← Back to Chapters

jQuery serialize()

? jQuery serialize()

? Quick Overview

The serialize() method in jQuery is used to collect form data and convert it into a URL-encoded query string. It is commonly used when submitting form data using AJAX.

? Key Concepts

  • Works only on form elements
  • Includes enabled form fields with a name attribute
  • Useful for AJAX requests
  • Returns data in query-string format

? Syntax / Theory

The serialize() method gathers input values from a form and encodes them as name-value pairs.

? View Code Example 
// Syntax of jQuery serialize()
$(selector).serialize();

? Code Example

? View Code Example 
// Serialize form data on button click
$("#btn").click(function () {
var data = $("#myForm").serialize();
console.log(data);
});

? Live Output / Explanation

Output

If a form has fields like name=John and age=25, the serialized output will be:

name=John&age=25

? Interactive Example






Serialized Data

Click the button to see output

? View Code Example 
// Display serialized data in the output box
$("#btn").click(function () {
$("#resultText").text($("#myForm").serialize());
});

? Use Cases

  • Submitting form data via AJAX
  • Sending data to server without page reload
  • Quick debugging of form values

✅ Tips & Best Practices

  • Ensure all inputs have a name attribute
  • Disable fields are not included
  • Use with $.ajax() for best results

? Try It Yourself

  • Add checkbox and radio inputs and serialize them
  • Send serialized data using AJAX
  • Compare serialize() vs serializeArray()