Как я могу использовать Javascript, чтобы отключить кнопку после отправки формы в Chrome?

Question

У меня есть веб-форма, для которой я хочу запретить многократные отправки. В производстве это достигается кнопкой отправки, имеющей атрибут onclick="this.disabled=true". Таким образом, если форма отправлена, а затем пользователь возвращается (предположительно, чтобы «отредактировать» данные, что время от времени наши пользователи хотели делать), кнопка отправки остается отключенной.

Это прекрасно работает в Firefox, Safari и Internet Explorer. Однако в Chrome отключение отключается перед отправкой формы, что предотвращает его возникновение. Чтобы обойти это, я изменил действие кнопки onclick на:

this.disabled=true; $('myform').submit()

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

Есть ли способ выполнить то, что я хочу, с помощью Javascript в Chrome? Конечно, есть и другие способы решения этой проблемы, но отключение кнопки имеет очень привлекательную простоту.

Я тестировал в Chrome 12.0.742.100 в Linux и 12.0.742.112 в MacOS X.

Answer 1

Я предпочитаю это

http://jsfiddle.net/mplungjan/sCgZ9/

Сценарий:

$("form").submit(function() {
  $("#subbut").hide();
  $("#submitted").show();
});

CSS:

#submitted { display:none }

HTML:

<form action="http://www.google.com/" target="_blank">
<input type="submit" id="subbut" /><span id="submitted">Form submitted</span>
</form>

Вы можете установить cookie, если хотите решить, показывать или не показывать кнопку

Answer 2

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

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

Answer 3

Я использую для этого

html

<form action="/" method="post">
    <button type="button" class="submit-form" >Save</button>
</form>

javascript

var button = document.querySelector('.submit-form')
button.addEventListener("click", function(){
    this.setAttribute('disabled',true);
    var form = this.closest('form')
    form.submit();
},false);

jquery

$(document).on("click",".submit-form",function(){
    $(this).attr('disabled',true);
    $form = $(this).closest('form');
    $form.submit();
});

Answer 4

Использование javascript

    <form name ="myform" method="POST" action="youractionhere" onSubmit="document.getElementById('submit').disabled=true;">
    <input type="submit" name="submit" value="Submit" id="Submit">
    </form>

Использование jQuery

$("form").each(function() {
        $(this).find("button:submit").click(function() {
                if($('input[type="submit"]').hasClass("disabled")) 
                return false; 
                $('input[type="submit"]').addClass("disabled");
                return true; 
        });
});