jquery.load() to POST all elements of a form rather than having to specify what to POST

Question

I have an existing HTML form that I'm trying to update to use jQuery.load(). How can I pass all of the elements of the form as POST parameters rather than having to specify which parameters to pass?

The form elements are created dynamically by a script and the number of elements as well as the name of the elements varies considerably to the extent that it's not practical to specify which parameters to pass via AJAX/POST. Is there a simple way to pass to jQuery.load() all of the elements within the <form></form> tags as if the form was submitted traditionally?

Answer 1

Easy: When you gather your form data and past it as the second parameter to load(), use serializeArray(data), and don't use serialize(data), as the currently accepted answer recommends.

serialize() returns a string, whereas serializeArray() returns an object. load() sends a POST if the data is an object. If data is a string, load() sends a GET.

Answer 2

You can use .serialize() to serialize all of the inputs of the form for submitting along with your jQuery.load() call.

$('form').serialize()

For example, using jQuery.load() (only does GET unless you pass it an object for data, then POST)

$.load(
    'postTo.php', 
    $('#yourFormId').serialize(), 
    complete(responseText, textStatus, XMLHttpRequest){
        //do your processing after the fact
}))

Using, jQuery.ajax(), you can make it POST

$.ajax({
    'url': 'postTo.php',
    'type': 'POST',
    'data': $('#yourFormId').serialize(),
    'success': function(result){
         //process here
    }
});

See: http://api.jquery.com/jQuery.ajax/