jQuery Form Plugin: ajaxSubmit vs. ajaxForm - Usage Guide

This documentation clarifies the distinction between the jQuery Form Plugin's ajaxSubmit and ajaxForm functions. These functions are mutually exclusive and serve distinct purposes in handling form submissions.

Choosing the Right Function

• ajaxSubmit: Use this function when you want to bind your own submit handler to the form. This allows for greater control over the submission process. You'll need to prevent the default form submission behavior manually.

$(document).ready(function() {
    $('#myForm').on('submit', function(e) {
        e.preventDefault(); // <-- Important to prevent default submission
        $(this).ajaxSubmit({
            target: '#output'
        });
    });
});

• ajaxForm: This function streamlines the submission process by managing all event binding for you. It automatically handles the submit event and integrates seamlessly with the plugin's features.

$(document).ready(function() {
    $('#myForm').ajaxForm({
        target: '#output'
    });
});

Delegation (jQuery v1.7+):

The ajaxForm function supports delegation, allowing you to apply it to forms that may not exist when the script is executed.

$('#myForm').ajaxForm({
    delegation: true,
    target: '#output'
});

Integration with ajaxSubmit:

When using ajaxForm, the ajaxSubmit function is invoked internally at the appropriate time, handling the actual AJAX submission behind the scenes.