jQuery - Submit and button spamming prevention + Bootstrap spinner

jQuery - Submit and button spamming prevention + Bootstrap spinner.md

jQuery - Submit and button spamming prevention + Bootstrap spinner

Supports any <form> with disable-on-submit class AND including a <button> with type="submit". Also supports any standalone <button> with disable-on-click class.

Supports replacement of Font Awesome icons: On submit/click, if button has a Font Awesome icon it will be replaced by the Bootstrap spinner.

Note: You can use it on <input type="submit"> instead of <button> but only for spamming prevention, Bootstrap spinner will not be displayed.

assets/js/components/submit-and-button-spamming-prevention.js

// Disables (submit) button, prevents submit spamming and displays loading spinner.
import {body} from './helpers/jquery/selectors';
import {translations} from './twigData/data/translations'

function handleButton(button) {
    button.attr('disabled', true);

    const buttonIcon = button.find(
        "span[class^='fas fa-']," +
        "span[class^='far fa-']," +
        "span[class^='fal fa-']," +
        "span[class^='fad fa-']," +
        "span[class^='fab fa-']"
    );

    // IF button has an icon already, replaces it with spinner icon. ELSE, prepends spinner icon to button content.
    if (buttonIcon.exists()) {
        buttonIcon.replaceWith(`
            <div class="spinner-border spinner-border-sm mr-2" role="status">
                <span class="sr-only">${translations.global.loading}</span>
            </div>
        `);
    } else {
        // Use .append if you want the spinner to be displayed after the button label instead of before it.
        button.prepend(`
            <div class="spinner-border spinner-border-sm mr-2" role="status">
                <span class="sr-only">${translations.global.loading}</span>
            </div>
        `);
    }
}

body.on('submit', '.disable-on-submit', function () {
    /*
    Listens to submit event on form instead of listening to click event on submit button to avoid button disabling
    if clicked while form has validation errors thrown by the browser (e.g. required="required").
    */
    const submitButton = $(this).find('[type="submit"]');

    // Prevents submit if submit button is already disabled. Required to prevent spamming through enter key press.
    if (submitButton.attr('disabled')) {
        return false;
    }

    handleButton(submitButton);
});

// Disables button to prevent spamming and displays loading spinner.
body.on('click', '.disable-on-click', function () {
    handleButton($(this));
});

You will probably need it globally so add it to assets/js/app.js

// [...]

import './components/submit-and-button-spamming-prevention';