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

Question

У меня есть форма, которую пользователи используют для ввода информации о публикации. По завершении они нажимают «Сохранить» для обновления. Однако в некоторых редких случаях (10 на 15 000 записей) пользователь дважды нажимал кнопку сохранения и вызывал двойную отправку формы, дублируя элементы для публикации.

Я пытался использовать это, чтобы предотвратить это:

$('input[type=submit]').click(function(){
    $('input[type=submit]').attr('disabled',true);
    //return true;
});

Но проблема с этим, он отлично работает в Safari / Firefox и т. Д., Но не работает в Internet Explorer 8 (и, вероятно, не для 6 и 7)

Когда я нажимаю сохранить в IE8, кнопка отключается, и все, форма не отправляется вообще.

(я пробовал с и без возврата true;)

Answer 1

Я не уверен, так что это полное предположение, но, возможно, дело до вашего селектора Попробуйте вместо:

$('input:submit').click(function() {
    $(this).attr('disabled', true);
});#

Вы также можете попытаться перехватить само submit event:

$('form').bind('submit', function(e) {
     $(this).find('input:submit').attr('disabled', 'disabled');
});

Answer 2

Вам нужно обработать событие отправки формы, а не событие нажатия кнопки отправки.

Answer 3

Пользователь также может нажать Enter, чтобы отправить форму, поэтому вместо связывания события нажатия кнопки используйте форму отправки. Также вместо того, чтобы отключить, спрячьте кнопку отправки, заменив ее загрузочным изображением.

jQuery("form").submit(function () {
        jQuery(":submit", this).css("display", "none");
        jQuery(":submit", this).after("<span><img src='loading.gif' /></span>");
});

Answer 4

Чирс, это очень распространенная проблема, с которой сталкивается каждый веб-разработчик. И угадайте, что, у него есть очень хорошо принятое решение.

Решение известно как PRG (Post -> Redirect -> Get). Подробнее об этом читайте на http://en.wikipedia.org/wiki/Post/Redirect/Get

Как правило, вам нужно оставить страницу в режиме HTTP GET, чтобы, даже если пользователь обновляет страницу, никакие данные не отправлялись повторно. Итак, вы отправляете форму, перенаправляете страницу на URL, который отображает недавно отправленные данные, выполняя запрос GET.

EDIT Согласно приведенному ниже комментарию кажется, что Крис уже следует вышеупомянутой парадигме. Отлично. Но он все еще видит повторные представления формы. Я бы предложил при первом представлении заменить кнопку загрузочным изображением (в первую очередь), чтобы пользователь не увидел ни одной кнопки для повторного нажатия:)

$(document).ready(function() {
   // function which handles form submission
   $(#submitButton).replaceWith("<img src="./images/myLoader.gif>");
   // do the actual form submission after this
   ...
});