Запретить двойную отправку форм в jQuery - PullRequest
Новая
       155

Запретить двойную отправку форм в jQuery

158 голосов
/ 14 мая 2010

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

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

Когда я пытаюсь сделать это в Firefox, все отключается, но форма не отправляется ни с какими данными POST, которые она должна включать. Я не могу использовать jQuery для отправки формы, потому что мне нужно отправить кнопку вместе с формой, так как есть несколько кнопок отправки, и я определяю, какое из них использовалось, какое значение включено в POST. Мне нужно, чтобы форма была отправлена, как обычно, и мне нужно отключить все сразу после этого.

Спасибо!

Ответы [ 23 ]

0 голосов
/ 17 августа 2015

Мое решение: 

// jQuery plugin to prevent double submission of forms
$.fn.preventDoubleSubmission = function () {
    var $form = $(this);

    $form.find('[type="submit"]').click(function () {
        $(this).prop('disabled', true);
        $form.submit();
    });

    // Keep chainability
    return this;
};
0 голосов
/ 13 июля 2011

Я решил очень похожую проблему, используя: 

$("#my_form").submit(function(){
    $('input[type=submit]').click(function(event){
        event.preventDefault();
    });
});
0 голосов
/ 18 марта 2014

этот код будет отображать загрузку на ярлыке кнопки и установить кнопку на

отключить состояние, затем после обработки снова включить и вернуть исходный текст кнопки **

$(function () {

    $(".btn-Loading").each(function (idx, elm) {
        $(elm).click(function () {
            //do processing
            if ($(".input-validation-error").length > 0)
                return;
            $(this).attr("label", $(this).text()).text("loading ....");
            $(this).delay(1000).animate({ disabled: true }, 1000, function () {
                //original event call
                $.when($(elm).delay(1000).one("click")).done(function () {
                    $(this).animate({ disabled: false }, 1000, function () {
                        $(this).text($(this).attr("label"));
                    })
                });
                //processing finalized
            });
        });
    });
    // and fire it after definition
}

);

Страница:
...