serializeArray() Demo

This example uses serializeArray(), adds an extra name/value pair, displays the resulting array, and can POST the same data to the included helper endpoint.

Add Extra Data Top ↑

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

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

POST the Array Top ↑

$.post(
    "serialize-demo2ck.php",
    formData,
    function ( returnedData ) {
        $( "#display" ).text(
            JSON.stringify(
                returnedData,
                null,
                2
            )
        );
    },
    "json"
);

Backend PHP Top ↑

header(
    'Content-Type: application/json; charset=utf-8'
);

$response = [
    't1' => (string)($_POST['t1'] ?? ''),
    't2' => (string)($_POST['t2'] ?? ''),
    'NewData' =>
        (string)($_POST['NewData'] ?? '')
];

echo json_encode(
    $response,
    JSON_UNESCAPED_UNICODE
);

See jQuery POST.

Additional Original Learning Routes Top ↑

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

• serialize-demo1.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: