Jquery Form Plugin or Jquery serialization?

Question

I am wondering what kind of advantages does the jQuery Form Plugin have over serialization?

If I do choose to go with the form plugin can I use the new jQuery 1.5 features?

Also does the Form Plugin have anything to stop multiple post backs? I usually use the Ajax manager plugin to stop duplicate ajax posts but I don't think I can use it with Form Plugin.

Thanks

Answer 1

The jQuery Form Plugin offers simplicity of using ajax with forms. It will use the form attributes to determine how and where to submit the form. The form's method attribute tells the plugin the request type to use. The form's action attribute tells it where to submit the form.

Considering an example form like this:

<form id="myform" action="submit.php" method="post">
<!--inputs and submit button go here-->
</form>

In essence it allows you to write:

$('#myform').ajaxForm();

instead of

$.post("submit.php", $("#myform").serialize());

The jquery Form plugin will also allow you to submit via Ajax from your code.

$('#myform').ajaxSubmit();

The jQuery Forms Plugin will serialize the form anyway, your going to have to serialize before you submit to the server. The jQuery Form Plugin just serializes the form behind the scenes. The examples above do not handle any responses from the server.
Using the code below you can append the response to elements whose class attribute contains "result".

$('#myform').ajaxForm({ target : ".result"});

You can use any selector that is supported in jQuery for the target option.

I'm not sure if you can use deferred methods with it or not. I doubt it because the compatibility is for 1.3.2+ and the native ajax methods are wrapped up in the plugin. Such that the Deferred object is never returned from the plugin internals.

The jQuery form does have a beforeSubmit option that can be used. So adding to the above code we get:

$('#myform').ajaxForm({ target: ".result", beforeSubmit: function(arr, $form, options) {
        // arr: The array of form data
        // The array of form data takes the following form: 
        // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

        //some code to check if we already submitted the form

        // return false to cancel submit                  
    }
});

However, I would recommend against doing that if user is done with the page after they submit the form. It would only add unneeded complexity to your client-side code. Should be okay if the user will be doing other stuff on the page after the form submission. The jQuery Forms Plugin has a success option that takes a function callback to be called if the server returns a 200 "OK" response. You can also check out the authors website for the plugin http://jquery.malsup.com/form/ for much more info on the plugin.