jQuery:hooking form submit and making it ajax request

modern javascript frameworks are big blessings to every front end developer. they made our life so much easier so that we can sleep more and become fat day by day 😀 – i am a big fan of jQuery and mootools.

in this post i am going to show you how you can hook a normal form submission process, regardless of it’s method GET or POST, and convert it into an ajax request. the whole process will work dynamically. it will parse form input elements, make a JSON array from them and make an ajax request to the appropriate action url. after that, it will invoke the user supplied callback function.

problem 1: parsing form elements was a small challenge. you can do it in various way (by traversing or serialize or using css selectors). i choose to use serializer routines. jQuery has builtin support for two types of serializing , one is $(form).serialize() and another is $(form).serializeArray(). lets have a look at the output of both of them for the following form

<form id="f1" action='some target' method='POST'>
<input type ="textbox" id='username' name ='username' value='me'/>
<input type ="checkbox" value=1 id='guests' name ='guests'/>
</form>

now lets check the output by both serialize() and serializeArray() method

alert ($('#f1').serialize());
//output is "username=me&guests=1"

alert($('#f1').serializeArray()
//output is [{object},{object}] 

are you scared seeing this [object] output of serializeArray()? well dont panic. serializeArray() returns a JSON structure. you can still investigate using toSource() method

alert($('#f1').serializeArray().toSource()
//output is [{"username":"me"},{"guests":"1"}] 

but that will not be usable to send in our AJAX request. we need a JSON array key/value pair (or you can use the output of serialize() function too to send as data in ajax request, the serilizeForm part is completely optional )

lets create a new function called serializeForm which will create JSON key/value pair out of serializeArray() and do the rest of the work.

$.fn.serializeForm = function()
{
    data = {};
    url = this.attr("action");
    items = this.serializeArray();
    $.each(items,function(i,item)
    {
        data[item['name']]=item['value'];
    }
    );
    return data;
}

now lets hook the normal submit process of the form using the following hook

function submitHook(form, callback)
{
    $(form).submit(function(e){
        items = {};
        items = $(form).serializeForm();
        url = $(form).attr("action");
        if(""==url)
        {
            alert("Cannot submit form. No action specified");
            return false;
        }
        callback = callback?callback:function(){};
        $.post(url,items,callback);
        return false;
    });
}

now you can just hook the form simply by this

ourCallback = function (data)
{
   alert(data);
}

submitHook($('#f1'),ourCallback);

happy jQuerying 🙂