How to add data to a form when submitting via a POST AJAX request?

Nate

I am using jQuery's $.ajax() function to submit a form. I pass the form data like this:

data: form.serialize()

However, I would like to add additional data to the POST request.

According to this answer, the way to do this is to use serializeArray() on the form, then push data onto the resulting array of objects. The problem is that when I then try to serialize the resulting array, jQuery returns an error.

Here is an example:

<form id="test">
    <input type="hidden" name="firstName" value="John">
    <input type="hidden" name="lastName" value="Doe">
</form>

JS:

console.log($("#test").serialize()); // firstName=John&lastName=Doe 

var data = $("#test").serializeArray();
console.log(data); // [Object, Object]

data.push({name: 'middleName', value: 'Bob'});
console.log(data); // [Object, Object, Object]

console.log(data.serialize()); // Uncaught TypeError: undefined is not a function 

JSFiddle

What am I doing wrong?

Matt

As pointed out by kapa, jQuery permits you to pass the array you get from serializeArray() directly as a data parameter, so your code can be as simple as;

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

data.push({name: 'middleName', value: 'Bob'});

jQuery.ajax({
    data: data,
    // Other params
});

However, to explain why your previous code wasn't working (and here starts my previous answer); serializeArray() literally returns an array. Array's don't have a serialize() method on them; which is why your code was failing.

instead of using serialize() on the array returned from serializeArray(), call jQuery.param();

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

data.push({name: 'middleName', value: 'Bob'});
console.log(jQuery.param(data));

jQuery.param() is specifically provided to convert the { name, value } pairs generated by serializeArray() into a query string.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

No POST request when submitting form

No ajax post request when submitting form through jquery

Submitting form via POST with jQuery and Ajax

form submitting twice via ajax POST

Submitting binary data as a file via post request

Form is not submitting data via POST or GET

How can I extend and add to the IFormFile Interface in .NET Core. Need to append data to the serialised array when submitting an ajax request

How to change Request before submitting data to a Form?

Keep getting undefined body when submitting POST request on a form

Submitting a form via AJAX not working

Why use a form tag when you're submitting via ajax?

How do I post form data without submitting the form with jQuery?

Request body is undefined when submitting Form Data object using supertest

Node.JS - Express request returns undefined when when submitting a post request from a form

How to send form with ajax post request with rails

How to call different post requests when submitting different form inputs

Request body is empty when making a POST request via HTML form

How to send data to servlet using ajax without a submitting form

AJAX request fires twice on submitting a form

Pure Javascript Ajax request after submitting a form

Angular form submitting twice (ajax get request)

Form not submitting "Submit" input via Ajax

submitting a form which is being called via ajax

Submitting form via Ajax - FormData always empty

Submitting form via ajax in Laravel 5.1

How to send form data in a POST request in Ballerina?

Angular form is undefined when submitting via ngSubmit

How to formulate data object for POST request in AJAX

Pug Form POST Body Empty When Submitting