How to pass values of a form to the sever with Ajax and Jquery?

Question

How to use Ajax and Jquery to send all the values of input elements within a form to the server? The input elements are dynamically generated so a list of input names in an Ajax post is troublesome. So is there an elegant way to do it?

Answer 1

I had this problem yesterday. The way I worked around it was to loop through $('input.postValue') and append them to the post object in jquery.

Code sample would be something like:

$('input.postValue').each(function() {
    queryString += "&" this.id + "=" + $(this).val();
});

Shown a queryString builder since that's what i used.

edit: I should mention, I used this because ASP.Net and jquery.form don't work very well together.

Answer 2

You have to collect the values from the input elements and build them into the request url of the ajax script... use $('mytext').value to get the value.. and ad it to the url... e.g var url = 'http://www.domain.com/ajax.php?name='+$('mytext').value

Answer 3

You could use the serialize method:

$.ajax({
    url: 'someurl',
    data: $('#formId').serialize(),
    success: function(result) {
        // ...
    }
});

Answer 4

Try the serialize method.

Answer 5

You could always use a 3rd party jQuery plugin. jQuery Form is one that I'm familiar with and have used in the past.