jQuery Ajax Form Plugin: Submit Forms with AJAX

(function($) {

// Optional: Used to detect when the iframe has loaded
var iframeCount = 0;

// Check for presence of iframe.
function checkIfIframeLoaded(iframe, deferred) {
    iframeCount++;
    // Wait until the iframe has loaded before resolving the deferred object
    $(iframe).on('load', function() {
        // Prevent infinite loading of iframes in case there is an error
        if (iframeCount > 10) {
            deferred.reject();
        } else {
            deferred.resolve();
        }
    });
}

// Helper function to create the iframe
function createIframe() {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('name', 'jquery-ajax-form-plugin-iframe');
    iframe.setAttribute('id', 'jquery-ajax-form-plugin-iframe');
    iframe.setAttribute('style', 'display:none;');
    return iframe;
}

// Helper function to create the form
function createForm(options) {
    var form = document.createElement('form');
    form.setAttribute('method', options.type);
    form.setAttribute('action', options.url);
    form.setAttribute('enctype', 'multipart/form-data');
    form.setAttribute('target', 'jquery-ajax-form-plugin-iframe');
    form.setAttribute('style', 'display:none;');
    return form;
}

// Helper function to create the input fields
function createInputs(options, form) {
    var input;
    for (var i = 0; i < options.data.length; i++) {
        input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', options.data[i].name);
        input.setAttribute('value', options.data[i].value);
        form.appendChild(input);
    }
}

// Helper function to create the complete form
function createCompleteForm(options) {
    var form = createForm(options);
    createInputs(options, form);
    document.body.appendChild(form);
    return form;
}

// Main function
$.fn.ajaxForm = function(opts) {

    // Default options
    var options = $.extend({}, {
        type: 'POST',
        url: window.location.href,
        data: [],
        beforeSubmit: function() {},
        success: function() {},
        complete: function() {},
        error: function() {},
        iframe: false,
        timeout: 0,
        delegation: false,
        target: null
    }, opts);

    // If the target is not set, set it to the element that the form is attached to
    if (!options.target) {
        options.target = this;
    }

    // If delegation is set to true, attach event handler to document
    if (options.delegation) {
        $(document).on('submit', this.selector, function(e) {
            e.preventDefault();
            var form = $(this);
            // Call the main function with the form as the context
            $.fn.ajaxForm.call(form, options);
        });
        return this;
    }

    // Check if the form is valid
    if (typeof this[0] === 'undefined' || this[0].nodeName !== 'FORM') {
        return this;
    }

    // Set up deferred object to track when the iframe has loaded
    var deferred = $.Deferred();

    // Create the iframe
    var iframe;
    if (options.iframe) {
        iframe = createIframe();
        document.body.appendChild(iframe);
        checkIfIframeLoaded(iframe, deferred);
    }

    // Create the complete form
    var form = createCompleteForm(options);

    // Call the beforeSubmit callback
    options.beforeSubmit.call(this, options.data, form, options.target);

    // Submit the form
    $(form).submit();

    // Set up timeout if specified
    if (options.timeout > 0) {
        setTimeout(function() {
            deferred.reject();
        }, options.timeout);
    }

    // Wait for the iframe to load before calling the success callback
    deferred.done(function() {
        // Get the response from the iframe
        var response = iframe.contentDocument.body.innerHTML;

        // Call the success callback
        options.success.call(options.target, response);

        // Call the complete callback
        options.complete.call(options.target);
    }).fail(function() {
        // Call the error callback
        options.error.call(options.target);

        // Call the complete callback
        options.complete.call(options.target);
    });

    // Remove the form and iframe after they have been submitted
    $(form).remove();
    $(iframe).remove();

    return this;
};

})(jQuery);