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

Question

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

Я гуглил и гуглил и нашел несколько скриптов, но ни одного из них, похоже, недостаточно.

Как я могу предотвратить возникновение этих повторяющихся записей, используя javascript или предпочтительно jQuery?

Заранее спасибо!

Answer 1

Как насчет отключения кнопки отправки? Это то, чем я занимаюсь. Работает нормально.

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

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

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

Answer 2

Это должно сработать:

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

Нет JQuery?

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

Answer 3

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

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

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

Answer 4

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

• элементы кнопок
• img elements
• JavaScripts
• нажатие кнопки ввода в текстовом поле

Использование контейнера данных 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;
});

Answer 5

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

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

Answer 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);
    });
});

Answer 7

Вот что я сделал, чтобы решить проблему.Я отключил кнопку на секунду, дважды добавив 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);
        });
});

Answer 8

Я не уверен, с каким языком / фреймворком вы работаете или это просто обычный 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..."} %>

Answer 9

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

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

Answer 10

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

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

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