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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Итак, я модифицировал vanstee script следующим образом:

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

Ответ 3

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

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

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

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

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

Ответ 4

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

<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>

Ответ 5

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

&

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

Ответ 9

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

Ответ 10

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

Это шаблон webapp с именем PRG, и здесь хорошая статья, которая описывает его

Ответ 11

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

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;

});

Ответ 12

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

Ответ 13

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

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

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

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

Ответ 14

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

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

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

Ответ 15

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

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>

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

Ответ 16

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

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

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

Ответ 17

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

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

Ответ 18

Сделать это с помощью 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>

Ответ 19

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

[click here][1]

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

Ответ 20

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

Ответ 21

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

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

Ответ 22

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

Ответ 23

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

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