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

Question

По любой причине, хотя этот код обновляет страницу, поля не публикуются ...

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

Есть ли лучший способ кодирования этого?

Answer 1

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

Попробуйте:

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

Answer 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, который должен быть в состоянии отправить несколько раз.

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

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

Answer 3

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

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

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

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

Answer 4

То, что я в итоге использовал, работает в Chrome 53:

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

Answer 5

Нет причины, по которой ваш код не должен работать . При отправке формы кнопка отправки отключена. Я проверил заголовки, передаваемые в 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 ), чтобы увидеть, действительно ли поля вашей формы отправляются на сервер. Если это так, очевидно, это проблема на вашем сервере.
• Если поля формы не отправляются, на вашей странице происходит что-то еще. Разместите больше своего кода, чтобы мы могли точно видеть, что происходит.

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

$(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;
    })

});

Для ссылок необходимо добавить класс «submit».

Answer 9

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