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

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/