There is only one truth. It is the source.

• Index
• Tags
• About

Submitting forms in JavaScript

January 17, 2015

Tags: javascript

Asynchronous and synchronous (requires jQuery, URI.js)

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

var submitFormAsynchronously = function (selector, serializeForm, dataObject, successCallback, errorCallback) {
    var form = $(selector);
    var method = form.attr('method');
    var url = form.attr('action');
    var data = {};
    if (serializeForm) {
        data = form.serializeObject();
    }
    data = $.extend(data, dataObject);

    $.ajax({
        url: url,
        type: method,
        data: data,
        success: successCallback,
        error: errorCallback
    });
};

submitFormAsynchronously('#my-form-element', {}, $.noop, $.noop);

var submitFormSynchronously = function (selector, serializeForm, dataObject) {
    var form = $(selector);
    var method = form.attr('method');
    var url = form.attr('action');
    var data = {};
    if (serializeForm) {
        data = form.serializeObject();
    }
    data = $.extend(data, dataObject);

    // Create a form and submit it synchronously
    var myForm = $('<form>', {method: method, action: url});
    // Add values
    if (data) {
        $.each(data, function (key, value) {
            myForm.append($('<input>', {name: key, value: value}));
        });
    }
    myForm.hide().appendTo('body');
    myForm.submit();
};

submitFormSynchronously('#my-form-element', {}, {});