Show a progress bar when a form is submitted (and prevent more than one submission per document).

postforms.js

/*
Show a progress element for any form submission via POST.
Prevent the form element from being submitted twice.
*/
(function (win, doc) {
    'use strict';
    if (!doc.querySelectorAll || !win.addEventListener) {
        // doesn't cut the mustard.
        return;
    }
    var forms = doc.querySelectorAll('form[method="post"]'),
        formcount = forms.length,
        i,
        submitting = false,
        checkForm = function (ev) {
            if (submitting) {
                ev.preventDefault();
            } else {
                submitting = true;
                this.appendChild(doc.createElement('progress'));
            }
        };
    for (i = 0; i < formcount; i = i + 1) {
        forms[i].addEventListener('submit', checkForm, false);
    }
}(this, this.document));

@wjaspers, when would you want users to submit several forms at the same time? I don’t think there is any harm in “locking” all forms when you are waiting for the server to respond to the first one that was submitted.

Why not remove the dependency on querySelectorAll by using the more widely-supported getElementsByTagName('form') and checking the form's method in the for loop?

@Zegnat what if I, as a user, want to submit the OTHER form, after i submitted the 1st one?
It's not an isolated use-case AFAIK

@stryju then you'd potentially lose all data submitted in the first form. Not a good thing!

@stryju, @decodedigital, then it depends completely on the timing what is going to happen. Either you cut off submitting the original data and it is lost between the browser and the receiving server. Or the data has actually been received by the server and something is (being) done with it and you cut the browser of from receiving any feedback on the first form. I do not see how this second scenario is – in anyway – a good thing for the user.

Actually, I do not see how wanting to submit the other form is a good use-case unless you accidentally tapped the wrong submit button. But that feels like a design problem of the website.

Why not remove the dependency on querySelectorAll by using the more widely-supported getElementsByTagName('form') and checking the form's method in the for loop?

I wonder if document.forms would trump that, speed wise.

I would do away with the submitting variable and change the checkForm function to this:

checkForm = function (ev) {
    var submitBtns = this.querySelectorAll('[type="submit"]'),
         amountSubmitBtns = submitBtns.length,
         i;

    for (i=0; i<amountSubmitBtns; i++) {
        submitBtns[i].disabled = true;
    }

    this.appendChild(doc.createElement('progress'));
};