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.

Answer 2

Ive just taken a peek at the forms plugin and to be honest if your a bit experienced in using jquery there's no reason to use a plugin. I don't see anything you can't accomplish just by using plain jquery in an easy way. If i need to send my full form data using ajax i use serialize.

This is all you need for a basic ajax call, what could the forms plugin do to make this easier?

$.ajax({
  type: 'POST',
  url: post/to/this/url,
  data: $("#myForm").serializeArray(),
  success: function() {
    // Woopie success!
    window.location.href = successurl;
  },
  error: function(jqXHR, textStatus, errorThrown){
    // do something with errors
  }
});

Answer 3

If you want to upload files using Ajax then this plugin is a must-have. Looking at the documentation of serializeArray it clearly states that:

Data from file select elements is not serialized

This plugin handles file uploads without any problem.

Answer 4

You do not need a form plugin specially when the task is as simple as serializing and submitting a form. A plugin can contain allot of features that you may never use or need. In addition if you're jQuery knowledge is limited or you are not too familiar with how plugins are created, it will not be an easy task to customize it the way you need. I go for a plugin a task is too complicated to create, in that case why re-invent the wheel if there is already a plugin for it. An example would be a color picker with HSB controls. If you do not know how colors works, then the time and effort to do the research and create your own color picker would be over the top.

You can use the following 2 lines as a basic approach for serializing and submitting a form.

var data = $(form).serialize();
$.post('post.php', '&'+data);

Read more about $.post() at http://api.jquery.com/jQuery.post/#example-3

Now if you feel you need to do complex things with your form and those features are already available in some plugin then it doesn't hurt to try it out and see how it works for you.

Answer 5

The form plugin is useful in that you can, in one call, submit a form over ajax with the same option abilities as $.ajax offers. It is a great way to simply hijack an interface to enhance its behavior. It is also nice because it smoothly handles file uploads via faux-ajax (iframe) without you needing to modify anything.

As far as I know, the form plugin does not do anything itself to avoid multiple submissions. I use the plugin on a very large project for various things, and I generally handle that myself via some additional code to track whether a form is in mid submission and avoid entering the function to submit again if it is.