Как предотвратить многократную отправку формы со стороны клиента?

Question

Иногда, когда ответ медленный, можно нажать кнопку отправки несколько раз.

Как предотвратить это?

Answer 1

Вы можете запретить многократную отправку, просто набрав:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Answer 2

Самый простой ответ на этот вопрос: «Иногда, когда ответ медленный, можно нажать кнопку« Отправить »несколько раз. Как предотвратить это?»

Просто отключите кнопку отправки формы, как показано ниже.

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

Это отключит кнопку отправки, при первом нажатии для отправки. Также, если у вас есть какие-то правила валидации, то все будет работать нормально. Надеюсь, это поможет.

Answer 3

Вы можете попробовать safeform плагин jquery.

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Answer 4

На стороне клиента вы должны отключить кнопку отправки после отправки формы с кодом javascript, как в методе, предоставленном @vanstee и @ chaos.

Но есть проблема в случае задержки сети или отключения javascript, когда вы не должны полагаться на JS для предотвращения этого.

Итак, на стороне сервера , вы должны проверить повторную отправку от одних и тех же клиентов и пропустить повторную отправку, которая кажется ложной попыткой со стороны пользователя.

Answer 5

Используйте этот код в своей форме. Он будет обрабатывать несколько кликов.

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

это будет работать наверняка.

Answer 6

Самое простое и элегантное для меня решение:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Ссылка для более ...

Answer 7

Альтернативой тому, что было предложено ранее, является:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});

Answer 8

Это позволяет отправлять каждые 2 секунды. В случае передней проверки.

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

Answer 9

Просто для добавления к возможным ответам без обхода проверки ввода в браузере

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Answer 10

Это работает очень хорошо для меня. Она отправляет ферму и отключает кнопку, а через 2 секунды активирует кнопку.

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

В ECMA6 Syntex

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}