Writings, notes, and work of a Boston based designer

How to use jQuery to Serialize Ajax Forms May 4 + 2 comments

written by: ryan coughlin

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 blu electronic cigarette 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().

Take a peak at some more?

  • Pingback: » Key Ceremony Jack Parker (ice hockey)

  • pudinet

    How decoding a serialized string in PHP?

  • http://Yourwebsite... Brian

    @PUDINET

    You would treat the serialize code like a GET form. The field=value relationship is passed as a querystring.

  • http://evokeweb.com Chris

    @brian

    Than you so much. I’ve literally been searching for the past 20 minutes for that answer. I was trying to use $_POST['something'] and after that didn’t work, I assumed there was some type of unserialize function or something. You saved me a ton of time.

  • http://evokeweb.com Chris

    @chris

    Wow, I’m extremely confused. I was using $_GET['something'] and now all of a sudden, I changed the variables and the file names, and it’ll only work with $_POST['something']

  • http://www.codeofaninja.com/ Mike

    Hi ryan, thanks for this tut, really simple and clear. :)

  • Ramesh

    sure…
    very useful… :)

  • Kiki

    mtn ayteyemo

  • Changhuang Lin

    useful

  • vgalitsky

    $(form).find(‘input,select,textarea’).serialize();