This is how serialize works in jQuery

When we work with PHP or other server-side languages, it is very common to handle applications with multiple modules, many of them based on HTML forms. In this context, client-side technologies such as JavaScript come into play, and although today there are modern alternatives (Fetch API, frameworks like React or Vue), jQuery is still widely used, especially in legacy projects and enterprise systems.

With the recent arrival of jQuery 4.x, the library has removed compatibility with obsolete browsers, simplified its core, and continues to offer a stable and well-known API. Within this API there is a classic, simple, and extremely useful method for handling forms: .serialize().

This method allows us to save many lines of code, reduce errors, and simplify sending data to the server.

What does the jQuery .serialize() method allow?

The .serialize() method analyzes the fields of an HTML form and generates a URL-encoded text string, ready to be sent to the server.

It automatically includes:

<input> (text, hidden, checkbox, radio, etc.)
<textarea>
<select> (single and multiple)
Fields with the name attribute

Only enabled and selected (checked / selected) fields

This makes it a direct and reliable solution for collecting form data without manually going through field by field.

The jQuery serialize() method is used to encode the values of one or more form elements into a URL-encoded text string, ideal for sending data to a server via AJAX requests, without needing to reload the page.

Despite the emergence of modern technologies like fetch() or FormData, serialize() is still widely used, especially in existing projects, administrative systems, and jQuery-based applications.
In jQuery 4.x, this method is still available and its behavior has not changed.

What can the jQuery .serialize() method be used for?

Once the form is analyzed, it proceeds to create a text string in URL-encoded notation; that is, it allows the text string to be encoded so that it can be easily processed from a server-side language as if it were a GET but without the need to load the page to obtain these values; that is why at the beginning the gain in lines of code was indicated, since we do not have to iterate one by one the form fields and process them via JavaScript; invoking this method does all the work for us.

In other words, it allows obtaining the form values without the user having to send them by pressing the submit button; this is useful if you want to create a form with a behavior that involves constantly analyzing form data on the server without the need for us to concatenate the form fields one by one.

In practical terms, it automatically converts the values of the form fields into a string ready to be sent to the backend

Although the .serialize() function is so complete and versatile that we do not have to use it on a complete set of form fields; it can also be used on individual elements of the same form; for example:

$( "input#my_id" ).serialize();

Or a group of them:

$( "input, textarea, select" ).serialize();

Or even the entire form, which would be the usual thing:

$( "form#my_form" ).serialize();

In summary, we can use the .serialize() method in any way supported by the selectors of the jQuery library.

Mainly for:

Sending forms via AJAX
Getting the values of a form without needing to submit
Simplifying validations or partial submissions
Reducing repetitive JavaScript code

The result is a string similar to a GET request, but without reloading the page:

field1=value1&field2=value2

This string can be easily processed by PHP, Node.js, Python, or another backend.

What elements does it serialize?

.serialize() automatically includes:
<input> (text, hidden, checkbox, radio, email, etc.)
<textarea>
<select> (single and multiple)

In summary:

A complete form (<form>)
One or more individual fields

Advantages over manual solutions

Before .serialize() it was common to do something like:

var data = {
 name: $("#name").val(),
 email: $("#email").val(),
 age: $("#age").val()
};

With .serialize():

var data = $("#my_form").serialize();

✔ Less code
✔ Fewer errors
✔ More readability

Ways to use .serialize()

Although it is usually applied to a complete form, jQuery allows it to be used with any valid selector:

$("input#my_id").serialize();
$("input, textarea, select").serialize();
$("form#my_form").serialize();

This is still fully compatible in jQuery 4.x.

Example of using the jQuery .serialize() method

For the following form:

<form id="my_form">
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <br />
  <select name="multiple" multiple>
    <option selected>Multiple</option>
    <option>Multiple2</option>
    <option selected>Multiple3</option>
  </select>
  <br />
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked id="ch2">
  <label for="ch2">check2</label>
  <br />
  <input type="radio" name="radio" value="radio1" checked id="r1">
  <label for="r1">radio1</label>
  <input type="radio" name="radio" value="radio2" id="r2">
  <label for="r2">radio2</label>
</form>
<p id="results"></p>

And the following JavaScript code with jQuery:

function form_serialize() {
  const str = $("#my_form").serialize();
  $("#results").text(str);
}
$("#my_form").on("change", form_serialize);
$(function () {
  form_serialize();
});

Demonstration of the use of the jQuery .serialize() method

single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

.serialize() vs .serializeArray()

If you need the data in a more manageable format in JavaScript:

var data = $("#myForm").serializeArray();

Output:

[
 { name: "name", value: "John" },
 { name: "email", value: "john@email.com" }
]

Ideal for advanced validations or custom transformations.

Complete example with AJAX (modern style compatible with jQuery 4)

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
  <label for="subscribe">Subscribe</label>
  <button type="button" id="sendData">Send</button>
</form>
<div id="result"></div>

The JavaScript:

$(function () {
  $("#sendData").on("click", function () {
    const data = $("#myForm").serialize();
    $("#result").text("Serialized data: " + data);
    /*
    $.ajax({
      type: "POST",
      url: "server.php",
      data: data,
      success: function (response) {
        console.log("Data sent successfully");
      }
    });
    */
  });
});

Serialize elements that are NOT inside a <form>

It is not mandatory to use a form.

You can serialize any set of controls using appropriate selectors.

<div id="aDiv">
   <input type="text" name="field1">
   <select name="field2">
        <option value="1">1</option>
        <option value="2">2</option>
   </select>
   <input type="text" name="field3">
</div>
var parameters = $("#aDiv :input").serialize();

The :input selector automatically includes:

input
select
textarea
button

Limitations of .serialize()

❌ Does not allow file uploads
❌ Does not include disabled fields
❌ Does not replace form validations

For files or complex structures, FormData is recommended.

Important considerations

name attribute
- Without name, the field will not be serialized.
File uploads
- serialize() does NOT work with file type inputs.
  For that you must use FormData.
Disabled fields
- Fields with disabled are ignored.
serializeArray()
- If you need to manipulate the data as JavaScript objects:

var data = $("#myForm").serializeArray();

Output:

[
 { name: "name", value: "John" },
 { name: "email", value: "john@email.com" }
]

Note on jQuery 4 and modern technologies

.serialize() is still current and functional in jQuery 4
jQuery no longer aims to compete with modern frameworks
It is still ideal for:
- Old projects
- Admin panels
- Enterprise systems
- Quick forms without over-engineering

For new projects, there are also alternatives such as:

FormData
fetch()
SPA Frameworks

But in existing systems, serialize() is still a solid and reliable tool.

Conclusion

The jQuery .serialize() method is still a solution:

✔ Fast
✔ Readable
✔ Proven
✔ Fully compatible with jQuery 4

It is especially useful when you work with long forms, need to send data via AJAX, or maintain legacy projects without rewriting all the logic in modern JavaScript.

It is ideal for long forms, legacy projects, and developments where a complex architecture is not needed.

Although today there are modern alternatives, serialize() continues to be a solid tool when working with jQuery and AJAX.