jQuery serialize() and serializeArray()

jQuery .serialize() converts successful form controls into a URL-encoded name/value query string. .serializeArray() returns an array of { name, value } objects that you can inspect or extend before sending.

serialize() Top ↑

$( "#b1" ).on( "click", function () {
    const formData =
        $( "#f1" ).serialize();

    $( "#display" ).text( formData );
});

Every form control that should be serialized needs a name. An ID alone is not enough.

<!-- Not serialized because name is missing -->
<input type="text" id="t1">

<!-- Serialized -->
<input type="text" id="t1" name="t1">

Demo: serialize() with one text input →

Demo: serialize() with multiple input types →

serializeArray() Top ↑

const data =
    $( "#f1" ).serializeArray();

data.push({
    name: "NewData",
    value: "Data value"
});

Related JavaScript tutorial: Array.push().

Demo: add extra data with serializeArray() →

Use Serialized Data with GET or POST Top ↑

Serialized data can be sent with jQuery HTTP methods. See GET and POST.

Additional Original Learning Routes Top ↑

These original tutorial/demo routes are retained so no useful learner path is lost:

• event-click.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: