Förhindra multipla postningar med JavaScript

I det här inlägget visas hur du förhindrar multipla postningar med hjälp av JavaScript. Det finns alltid en risk för att en användare klickar på en knapp flera gånger, det kan bero på att inskickningen tar tid eller att användaren dubbelklickar på inlämningsknappen.

Dubblettpostningar av ett formulär kan skapa stora problem i vissa situationer, en användare kan registreras med 2 eller flera konton och en order kan resultera i 2 eller flera order.

Design (CSS)

Vi kommer att förhindra dubbla inlämningar genom att inaktivera knappar. Vi skapar en stil för inaktiverade knappar, detta för att klargöra att dessa knappar inte är klickbara.

input:disabled, button:disabled, input:disabled:hover, button:disabled:hover {
    resize: none;
    color: #000000;
    background-color: #ddd;
    cursor: default;
}

Skicka formulär

Vårt formulär har tre knappar och vi lägger till en btn-disablable klass till knappar som kan inaktiveras. Det är viktigt att vi även aktiverar knappar när vår webbplats är redo att acceptera postningar igen. Vi måste aktivera knapparna om valideringen misslyckas eller när inlämningsoperationen är klar.

<input type="button" class="annytab-form-button btn-disablable" value="@save_tt" onclick="sendForm(document.getElementById('inputForm'))" />
@*<input type="submit" class="annytab-form-button" value="@save_tt" />*@
<input type="button" class="annytab-form-button btn-disablable" value="@cancel_tt" onclick="location.href='/admin_administrators'" />
<input type="button" class="annytab-form-button btn-disablable" value="minify" onclick="panel.minify();" />

<script>
    // Submit a form
    async function sendForm(form)
    {
        // Disable buttons
        disableButtons();

        // Make sure that the form is valid
        if (await annytab.validation.valid(form) === false) { enableButtons(); return false; }

        // Get form data
        var fd = new FormData(form);

        // Post form data
        var xhr = new XMLHttpRequest();
        xhr.open('POST', form.getAttribute('action'), true);
        xhr.onload = function () {
            if (xhr.status === 200)
            {
                // Get the response
                var data = JSON.parse(xhr.response);

                // Check the success status
                if (data.success === true)
                {
                    // Output a success message
                    toastr['success'](data.message);
                }
                else
                {
                    // Output error information
                    toastr['error'](data.message);
                }
            }
            else
            {
                // Output error information
                toastr['error'](xhr.status + " - " + xhr.statusText);
            }

            // Enable buttons
            enableButtons();

        };
        xhr.onerror = function ()
        {
            // Output error information
            toastr['error'](xhr.status + " - " + xhr.statusText);

            // Enable buttons
            enableButtons();
        };
        xhr.send(fd);

    } // End of the sendForm method

    // Disable buttons
    function disableButtons()
    {
        var buttons = document.getElementsByClassName('btn-disablable');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].setAttribute('disabled', true);
        }

    } // End of the disableButtons method

    // Enable buttons
    function enableButtons()
    {
        var buttons = document.getElementsByClassName('btn-disablable');
        for (var i = 0; i < buttons.length; i++) {
            setTimeout(function (button) { button.removeAttribute('disabled'); }, 1000, buttons[i]);
        }

    } // End of the enableButtons method

</script>

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *