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));
@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