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

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

Как этого не допустить?

Используйте ненавязчивый javascript, чтобы отключить событие отправки в форме после того, как оно уже было отправлено. Вот пример использования jQuery.

РЕДАКТИРОВАТЬ: исправлена ​​проблема с отправкой формы без нажатия кнопки отправки. Спасибо, Ичибан.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Я попробовал решение Вансти вместе с ненавязчивой проверкой asp mvc 3, и если проверка клиента не удалась, код все равно будет запущен, а формы отключена навсегда. Я не могу отправить заявку повторно после исправления полей. (см. комментарий bjan)

Поэтому я модифицировал сценарий Вансти следующим образом:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Управление отправкой формы на стороне клиента может быть реализовано довольно элегантно, если обработчик onsubmit скроет кнопку отправки и заменит ее анимацией загрузки. Таким образом, пользователь получает немедленную визуальную обратную связь в том же месте, где произошло его действие (щелчок). В то же время вы предотвращаете отправку формы в другой раз.

Если вы отправляете форму через XHR, имейте в виду, что вам также необходимо обрабатывать ошибки отправки, например тайм-аут. Вам придется снова отобразить кнопку отправки, потому что пользователю необходимо повторно отправить форму.

С другой стороны, llimllib поднимает очень важный вопрос. Вся проверка формы должна происходить на стороне сервера. Это включает в себя несколько проверок отправки. Никогда не доверяйте клиенту! Это не только случай, если отключен javascript. Вы должны иметь в виду, что весь код на стороне клиента можно изменять. Это довольно сложно представить, но html / javascript, обращающийся к вашему серверу, не обязательно является написанным вами html / javascript.

Как предлагает llimllib, сгенерируйте форму с идентификатором, уникальным для этой формы, и поместите его в скрытое поле ввода. Сохраните этот идентификатор. При получении данных формы обрабатывать их только при совпадении идентификатора. (Также связать идентификатор с сеансом пользователя и сопоставить его также для дополнительной безопасности.) После обработки данных удалите идентификатор.

Конечно, время от времени вам нужно будет очистить идентификаторы, для которых никогда не были отправлены данные формы. Но, скорее всего, на вашем веб-сайте уже используется какой-то механизм «сборки мусора».

<form onsubmit="if(submitted) return false; submitted = true; return true">

Вот простой способ сделать это:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Отключите кнопку отправки сразу после щелчка. Убедитесь, что вы правильно обрабатываете проверки. Также сохраните промежуточную страницу для всех операций обработки или БД, а затем перенаправьте на следующую страницу. Это гарантирует, что обновление второй страницы не повлечет за собой другую обработку.

Хешируйте текущее время, сделайте его скрытым вводом в форме. На стороне сервера проверяйте хэш каждой отправки формы; если вы уже получили этот хэш, значит, вы получили повторную отправку.

изменить: полагаться на javascript - не лучшая идея, поэтому вы все можете продолжать голосовать за эти идеи, но у некоторых пользователей она не будет включена. Правильный ответ - не доверять вводу пользователя на стороне сервера.

Вы также можете отобразить индикатор выполнения или счетчик, чтобы указать, что форма обрабатывается.

Используя JQuery, вы можете:

$('input:submit').click( function() { this.disabled = true } );

&

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Я знаю, что вы пометили свой вопрос с помощью javascript, но вот решение, которое вообще не зависит от javascript:

Это шаблон веб-приложения под названием PRG , и вот хорошая статья , описывающая его.

Вы можете предотвратить множественную отправку просто с помощью:

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;

});

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

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

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

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

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

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

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

Вы можете попробовать плагин 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;
    }
})

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

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>

Ссылка для получения дополнительной информации ...

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

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

точно будет работать.

Это позволяет отправлять каждые 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;
    });
})

лучший способ предотвратить отправку нескольких - просто передать идентификатор кнопки в метод.

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Сделать это с помощью javascript немного проще. Ниже приведен код, обеспечивающий желаемую функциональность:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Самое простое решение - отключить кнопку при нажатии, включить ее после завершения операции. Чтобы проверить аналогичное решение на jsfiddle:

[click here][1]

И вы можете найти другое решение по этому поводу .

Для меня это очень хорошо работает. Он отправляет ферму и отключает кнопку, а через 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);}

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

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

Альтернатива тому, что предлагалось ранее:

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