Question

I’m using jQuery to perform AJAX based page reloads on links – they bring up the “Loading…” div window and then close it when the content returns and load the content. This works exactly as expected.

I have several different forms in my project that I would like to submit using the same method – on submit bring up a “Loading…” div window and then close it when the content returns. Is there any way to do this without writing a custom function for each form? The samples I’ve seen require you to grab and encode each form field and pass it in the ajax method. Some forms only have a few fields, others have many so this would be a cumbersome process. I’d like it to just grab all fields in the form and submit them under the field names.

Any insight on this would be greatly appreciated!

Answer 1

It looks like you’re looking for something along the lines of .serialize(). It’s basically jQuery’s utility function for encoding form elements for an AJAX call or a GET query string.

Using that gets you something that looks like myinput=somevalue&myotherinput=someothervalue based on the name properties of your form elements. You can chuck that into whatever call you’re making against your server, as long as they recognize the format (versus something like JSON data or a scalar string, for example).