Skip to content

Instantly share code, notes, and snippets.

@adactio
Created March 2, 2014 23:42
Show Gist options
  • Save adactio/9315750 to your computer and use it in GitHub Desktop.
Save adactio/9315750 to your computer and use it in GitHub Desktop.
Show a progress bar when a form is submitted (and prevent more than one submission per document).
/*
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));
@Zegnat
Copy link

Zegnat commented Mar 7, 2014

@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.

@sjorsrijsdam
Copy link

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'));
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment