6

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?

Community
  • 1
  • 1
Nate
  • 26,164
  • 34
  • 130
  • 214
  • Why are you trying to call `serialize` on it? Simply follow the example code in the linked answer. Use `data` in your AJAX call, it is ready. Like `data: data`. – kapa May 28 '14 at 12:37
  • Did you try to use data in your ajax call after `.push()`; you shouldn't try to serialize the array. – PeterKA May 28 '14 at 12:38
  • @kapa the examples I've found for `$.ajax()` show the data as being passed as `form.serialize()`, which puts the inputs into a string (like a GET request would). That's why I'm trying to call `serialize()` on the array, to convert it to a string. – Nate May 28 '14 at 12:39
  • You may also use JSON http://jsfiddle.net/hqj4E/1/ – Nico O May 28 '14 at 12:40
  • @Nate Just read the docs instead of following examples blindly. Or follow examples blindly, and simply copy it from the answer in the linked question. Both methods will work in this case :). – kapa May 28 '14 at 12:40
  • That last line line looks a bit weird to me. You are serializing `data` which is in `serializeArray` format? – afaolek May 28 '14 at 12:46

3 Answers3

8

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.

Matt
  • 74,352
  • 26
  • 153
  • 180
1

serialize is a jquery method used to serialize a form object. Once you call serialize, you no longer have a jquery object, and thus you cannot serialize it. You should be able to pass your JSON object to $.ajax by stringifying it with the JSON object:

$.ajax({
   data: JSON.stringify(data)
   //...
});
Steve Danner
  • 21,818
  • 7
  • 41
  • 51
0

In addition to the other answer, sometimes it is easier to simply add hidden input elements, before the serilazation.

$('<input type=hidden>').attr({name:'middleName',value:'bob'}).appendTo('form#test')
Aminadav Glickshtein
  • 23,232
  • 12
  • 77
  • 117