How to create function for providing before/after submit event in JavaScript based on jQuery?

Question

First, I love a concept of jQuery about handler event. Please look at the following code.

$('#someid').submit(function()
{
    // some logic for checking input data before submit
    return isValid($(this));
});

But I have some problem when I try to create some indicator for displaying submit process. Because jQuery has not any function like before/after xxx event. So, it’s impossible to create some process like the following diagram.

Flow Diagram http://qmv6sa.bay.livefilestore.com/y1pybXwRr2DP061WcFlJCQppOJnwmSvT_CBcON53vyKJ-bvmQAMd6npqOm9VjorNRoqY2eUYt9mVCtEL_HArowjUtWRVEnwFu4J/flow.PNG

Although it’s possible to create the above diagram, but in real-world application 3 functions in different events do not know each other. So, it’s impossible to create some function like the following code.

function form_submit()
{
    if(isValid($(this)))
    {
        // send form data via AJAX/POST
        submitForm($(this));

        // display animation
        displayAnimation();
    }
    else
    {
        displayError();
    }
}

Do you have any idea for solving this question?

Update#1

I like some thing like the following code.

// Before Submit function will receive function as parameter. If some function return false this submit will not be submitted.
$('#form1').beforeSubmit(function()
{
    return isValid($(this));
});

// So, I can create custom submit function for posting data via AJAX or any protocal.
$('#form1').submit(function()
{
    var serializedData = serializeForm($(this));
    $.postForm($(this), serializedData);

    $(this).afterSubmit();
    return false;
}

// After that, I can display animation for showing form process.
$('#form1').afterSubmit(function()
{
    displayAnimation($(this));
}

Answer 1

I solved it by using Panels. But I would love to solve it using ajax as well.

Answer 2

I just solve my question with event wrapper by using the following code. It's quite long code. But it works well on my basic testing. I can assign prepare submit event for watermark extender, before submit event for control validator, submit event for sending form data via AJAX and after submit event for form posting indicator.

/* jQuery - Form Submit Event Extender */
var _prepareSubmitFunction = new Object();
var _beforeSubmitFunction = new Object();
var _submitFunction = new Object();
var _afterSubmitFunction = new Object();
jQuery.fn._oldSubmit = jQuery.fn.submit;

function formSubmitEventExtender_Init(form)
{
    form = $(form);

    form.unbind('submit.formSubmitEventExtender');
    form.bind('submit.formSubmitEventExtender', null, function ()
    {
        form.prepareSubmit();

        if (form.beforeSubmit())
        {
            var result = true;

            for (var i in _submitFunction[form.attr('id')])
            {
                var temp = _submitFunction[form.attr('id')][i]();
                temp = ((temp === false) ? false : true);

                result = result && temp;
            }

            form.afterSubmit();

            return result;
        }
        else
        {
            return false;
        }
    });
}

jQuery.fn.prepareSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_prepareSubmitFunction[id])
        {
            _prepareSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _prepareSubmitFunction[id]) < 0)
            _prepareSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _prepareSubmitFunction[id])
        {
            _prepareSubmitFunction[id][i]();
        }
    }

    return x;
};
jQuery.fn.beforeSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_beforeSubmitFunction[id])
        {
            _beforeSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _beforeSubmitFunction[id]) < 0)
            _beforeSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _beforeSubmitFunction[id])
        {
            if (!_beforeSubmitFunction[id][i]())
                return false;
        }

        return true;
    }

    return x;
};
jQuery.fn.submit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_submitFunction[id])
        {
            _submitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _submitFunction[id]) < 0)
            _submitFunction[id].push(fn);
    }
    else
    {
        x._oldSubmit();
    }

    return x;
};
jQuery.fn.afterSubmit = function (fn)
{
    var x = $(this);
    x.ensureHasId();
    var id = x.attr('id');

    if (fn)
    {
        if (!_afterSubmitFunction[id])
        {
            _afterSubmitFunction[id] = new Array();
            formSubmitEventExtender_Init(x);
        }

        if ($.inArray(fn, _afterSubmitFunction[id]) < 0)
            _afterSubmitFunction[id].push(fn);
    }
    else
    {
        for (var i in _afterSubmitFunction[id])
        {
            _afterSubmitFunction[id][i]();
        }
    }

    return x;
};

Answer 3

Your best bet is not to do this as a "normal" submission at all but use a method of Ajax submission. There are several of these. Check out Form Submission ajaxSubmit().

Assuming you make another Ajax call to validate the form somehow (or, say, retrieve additional information from another site) you could follow this process:

1. User clicks "submit";
2. Disable the submit button;
3. Make an Ajax call to validate, retrieve extra information or whatever;
4. In the callback for the completion of this Ajax call, call ajax submit;
5. When that submit returns send the user to a new page or do whatever.

Answer 4

Well you could do something like:

function beforeSubmit() {
    if (isValid($(this)) {
      $.ajax({
          type: 'POST',
          url: '/form/submit',
          success: afterSubmit
      });
    }
    return false;
}

function afterSubmit() {
}