Jquery отключить кнопку отправки при отправке формы

Ответ 1

Ваш код изменяет действие отправки формы. Вместо отправки он меняет атрибут кнопки.

Попробуй это:

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

Ответ 2

Я видел несколько способов сделать это:

• Отключить кнопки при нажатии
• Отключить кнопки при отправке
• Отключить форму при отправке

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

Добавьте класс в форму submit-once и используйте следующий jQuery:

$('form.submit-once').submit(function(e){
  if( $(this).hasClass('form-submitted') ){
    e.preventDefault();
    return;
  }
  $(this).addClass('form-submitted');
});

Это добавляет еще один класс в вашу форму: form-submitted. Затем, если вы попытаетесь отправить форму еще раз и у нее есть этот класс, jQuery будет препятствовать отправке формы и выйти из функции в return;, и, таким образом, ничто не будет повторно отправлено.

Я решил использовать $('form.submit-once') вместо $('form'), потому что некоторые из моих форм используют Ajax, который должен иметь возможность отправлять несколько раз.

Вы можете проверить это на этом jsFiddle. Я добавил target="_blank" в форму, чтобы вы могли протестировать отправку формы несколько раз.

Боковое примечание. Возможно, вы захотите рассмотреть пользователей, не являющихся JS, также предотвращая двойные представления на стороне сервера. Например, у вас есть переменная сеанса, которая хранит последнюю дату/время отправки и игнорирует любые последующие сообщения в течение 3 секунд.

Ответ 3

Нет причин, по которым ваш код не должен работать. При отправке формы кнопка отправки отключена. Я проверил заголовки, передаваемые JSFiddle в демо, и поле формы действительно отправляется (протестировано в IE и Chrome):

POST http://fiddle.jshell.net/josh3736/YnnGj/show/ HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Referer: http://fiddle.jshell.net/josh3736/YnnGj/show/
Accept-Language: en-US,en;q=0.7,es;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: fiddle.jshell.net
Content-Length: 9
Connection: Keep-Alive
Pragma: no-cache

test=It+works

Ваши следующие шаги должны быть:

• Используйте то, что позволяет вам проверять HTTP-трафик (мой любимый Fiddler), чтобы увидеть, действительно ли отправлены ваши поля формы к серверу. Если они есть, это, очевидно, проблема на вашем сервере.
• Если поля формы не отправляются, на вашей странице происходит что-то еще. Отправьте больше своего кода, чтобы мы могли точно видеть, что происходит.

Ответ 4

Что я использовал, работая в Chrome 53:

$('input[type=submit]').addClass('submit-once').click(function(e){
    if($(this).hasClass('form-submitted') ){
        e.preventDefault();
        return;
    }
    $(this).addClass('form-submitted');
});

Ответ 5

Что сработало для меня....

$('body').bind('pagecreate', function() {
    $("#signin-btn").bind('click', function() {
        $(this).button('disable');
        showProgress(); // The jquery spinny graphic
        $('form').submit();
    });
});

Ответ 6

Если вам нужно добавить кнопку, всегда есть <input type='button'> который может помочь. Если вы не хотите, чтобы кнопка "Отправить" отправлялась, лучше всего не добавлять кнопку "Отправить".

Ответ 7

Общее решение для всех входов, кнопок и ссылок с использованием значка загрузки изображения:

$(function(){
    $(document).on('click', 'input[type=submit], button[type=submit], a.submit, button.submit', function() {

        // Preserves element width
        var w = $(this).outerWidth();
        $(this).css('width', w+'px');

        // Replaces "input" text with "Wait..."
        if ($(this).is('input'))
            $(this).val('Wait...');

        // Replaces "button" and "a" html with a
        // loading image.
        else if ($(this).is('button') || $(this).is('a'))
            $(this).html('<img style="width: 16px; height: 16px;" src="path/to/loading/image.gif"></img>');            

        // Disables the element.
        $(this).attr('disabled', 'disabled');    

        // If the element IS NOT a link, submits the
        // enclosing form.
        if (!$(this).is('a'))    
            if ($(this).parents('form').length)
                $(this).parents('form')[0].submit();

        return true;
    })

});

Для ссылок вам нужно добавить класс "отправить".

Ответ 8

Ваш код в порядке. Я столкнулся с этой проблемой, но для меня проблема была в php, а не в javascript. Когда вы отключите кнопку, она больше не отправляется с формой, и мой php полагался на кнопку отправки

if(isset($_POST['submit'])){
   ...
}

Итак, страница обновляется, но php не выполняется. Теперь я использую другое поле с атрибутом required.

Ответ 9

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

$("form").submit(function () {
    // prevent duplicate form submissions
    $(this).find(":submit").attr('disabled', 'disabled');
});

Преимущества для меня:

• это хорошо работает с проверкой формы HTML5;
• он написан в общем виде, поэтому его можно использовать "как есть".