When I first started working with jQuery and submitting forms via Ajax, I’ve never really used .serialize() and wasn’t too familiar with it. I started to look in to how it works and what it can do. It can be a huge time saver, especially for larger forms.

Instead of declaring all of your data to be sent using something like:

var fname     = $('#fname').attr('value');
var lname     = $('#lname').attr('value');
$.ajax({
     data: “fname=”+ fname + “& lname=” + lname,
});

For a couple of fields above, that is fine, but what if you were creating a form with a large amount of fields. The last thing you would want to do is want to copy/paste that line 20 times for your field. Instead of grabbing each value of each form field we can use jQuery’s .serialize() to do the dirty work for us, which is a huge time saver. We can use something like:

$(function() {
     $('form').bind('submit',function() { showValues(); return false; });
});
function showValues() {
     var str = $("form").serialize();
     $(".results-box").fadeIn();
     $(".results").text(str);
}

The first section binds the submit to a function. When a user submits the form call the function showValues(), the next bit. We grab the form and attach .serialize() to it. We want to serialize all fields within this form and display what data is going to be sent to the sever. A working demo has been uploaded.

Now with our data serialized it is ready to be sent over to the server side. Using jQuery .serialize() is much more effiecient compared to retrieving the value using .val().