How can I disable Webform submit button after being clicked

Question

I've been trying to resolve an issue with no luck. For some reason there are no submission indicators out of the box with D7 Webforms and from what i've found it doesn't look like they have any plans to implement this as they have already added this 'feature' in D8.

I wrote a handler in javascript that will just replace the input with another, but it doesn't appear that the script is firing because the actual submit is taking priority

var form = document.getElementsByClassName("webform-client-form")[0];
var isValidForm = form.checkValidity();
var submitBtn = document.getElementsByClassName('webform-submit')[0];
function preventExtraSubmits() {
    if (isValidForm) {
        var fakeBtn = document.createElement("input");
        fakeBtn.value = "Submitting...";
        fakeBtn.classList.add('webform-submit button-primary form-submit')
        insertAfter(submitBtn, fakeBtn);
        submitBtn.style.display = 'none';
    }
}
function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
submitBtn.onsubmit = function(){preventExtraSubmits()}

From what i've seen is that this might need to be handled server side, but I can't seem figure out how to override webforms submit function.

Fairly new to Drupal and this has been a very frustrating battle to get this working

Drupal v 7.77 Webform v 7.x-4.23

Answer 1

You could try this module: https://www.drupal.org/project/hide_submit Be aware that this module has an issue with Ajax forms and file uploads.