How to add data to a form when submitting via a POST AJAX request?
ajax, forms, javascript, jquery
Solution
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.
Problem
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?