Как предотвратить двойную отправку с помощью jQuery или Javascript?

Ответ 1

Как отключить кнопку отправки? Это то, что я делаю. Он отлично работает.

$('form').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

Отказ от ответственности:
Это работает, только если javascript включен в браузере пользователя. Если данные, которые представлены, являются критическими (например, покупка кредитной карты), тогда рассмотрите мое решение как только первую линию защиты. Однако для многих случаев использования отключение кнопки отправки обеспечивает достаточную профилактику.

Я бы сначала применил это решение только для javascript. Затем отследите, сколько дублирующих записей все еще создается. Если он равен нулю (или достаточно низкий, чтобы не волновать), тогда все готово. Если он слишком высок для вас, тогда выполните проверку базы данных базы данных для существующей записи.

Ответ 2

Это должно сделать трюк:

$("form").submit(function() {
   $(":submit", this).attr("disabled", "disabled");
});

Нет JQuery?

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

Ответ 3

Один из методов, который я видел, - это присвоить уникальный идентификатор каждой открытой форме и принять только одно представление для каждой формы на основе идентификатора.

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

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

Ответ 4

Предотвращение двойной проводки не так просто, как отключение кнопки отправки. Есть и другие элементы, которые могут его отправить:

• Элементы кнопки
• элементы img
• JavaScripts
• нажатие 'enter' в то время как в некотором текстовом поле

Использование контейнера данных jQuery будет моим выбором. Вот пример:

$('#someForm').submit(function(){
    $this = $(this);

    /** prevent double posting */
    if ($this.data().isSubmitted) {
        return false;
    }

    /** do some processing */

    /** mark the form as processed, so we will not process it again */
    $this.data().isSubmitted = true;

    return true;
});

Ответ 5

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

$(document).ready(function() {
  $("#submit").one('click', function() {
  });
});

Ответ 6

Вот что я придумал в https://github.com/liberapay/liberapay.com/pull/875:

$('form').on('submit', function (e) {
    var $form = $(this);
    // Check that the form hasn't already been submitted
    if ($form.data('js-submit-disable')) {
        e.preventDefault();
        return false;
    }
    // Prevent submitting again
    $form.data('js-submit-disable', true);
    // Set a timer to disable inputs for visual feedback
    var $inputs = $form.find(':not(:disabled)');
    setTimeout(function () { $inputs.prop('disabled', true); }, 100);
    // Unlock if the user comes back to the page
    $(window).on('focus pageshow', function () {
        $form.data('js-submit-disable', false);
        $inputs.prop('disabled', false);
    });
});

Ответ 7

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

Чтобы решить эту проблему, вам нужно подключиться к событию успеха вашей системы проверки, и только после этого установите для элемента управления отправкой значение отключено. С помощью Parsley вы можете подключиться к форме с подтвержденным событием со следующим кодом:

$.listen('parsley:form:validated', function(e){
    if (e.validationResult) {
        /* Validation has passed, prevent double form submissions */
        $('button[type=submit]').attr('disabled', 'disabled');
  }
});

Ответ 8

Если вы используете проверку на стороне клиента и хотите разрешить дополнительные попытки отправки, если данные недействительны, вы можете запретить отправку только тогда, когда содержимое формы не изменяется:

var submittedFormContent = null;
$('#myForm').submit(function (e) {
    var newFormContent = $(this).serialize();
    if (submittedFormContent === newFormContent)
        e.preventDefault(true);
    else 
        submittedFormContent = newFormContent;
});

Ответ 9

Я не уверен, с каким языком/каркасом вы работаете, или просто с прямым HTML. Но в приложении Rails я написал, что передаю атрибут данных на кнопке формы disable_with, которая удерживает кнопку нажатой более одного раза во время транзакции.

Здесь выглядит ERB.

<%= f.button "Log In", class: 'btn btn-large btn-block btn-primary', data: {disable_with: "<i class='icon-spinner'></i>Logging In..."} %>

Ответ 10

Вот что я сделал, чтобы решить проблему. Я отключил кнопку на секунду, добавив setTimeout дважды:

- 1-й раз - позволить проверке полей формы JS работать;
- 2-й раз - включить кнопку в случае, если у вас есть какая-либо проверка на вашем бэкэнде, которая может вернуть ошибку, и, следовательно, пользователь захочет снова отправить форму после редактирования своих данных.

$(document).ready(function(){
        $('button[type=submit]').on("click", function(){
            setTimeout(function () {
                $('button[type=submit]').prop('disabled', true);
                }, 0);
            setTimeout(function () {
                $('button[type=submit]').prop('disabled', false);
                }, 1000);
        });
});