Как отключить кнопку отправки после ее нажатия?

Question

У меня есть кнопка отправки в конце формы.

Я добавил следующее условие кнопку отправки:

onClick="this.disabled=true; 
this.value='Sending…'; 
this.form.submit();" 

Но когда он переходит на следующую страницу, параметры не проходят и передаются нулевые значения.

Answer 1

Возможно, вы отправляете форму дважды. Удалить this.form.submit() или добавить return false в конец.

вы должны закончить с onClick="this.disabled=true; this.value='Sending…';"

Answer 2

Я не думаю, что вам нужно this.form.submit(). Код отключения должен быть запущен, затем он перейдет по клику, который щелкнет форму.

Answer 3

Ваш вопрос сбивает с толку, и вы действительно должны размещать код, но это должно работать:

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;" 

Я думаю, что когда вы используете this.form.submit() это делать то, что происходит естественным образом когда вы нажмете кнопку «Отправить». Если вы хотите отправить одну страницу, вам следует изучить использование AJAX в методе submitForm() (см. Выше).

Кроме того, возврат false в конце значения атрибута onClick подавляет событие по умолчанию при запуске (в этом случае отправляет форму).

Answer 4

Отключенные элементы HTML-форм не отправляются вместе со значениями post/get при отправке формы. Поэтому, если вы однажды отключили кнопку отправки, и эта кнопка отправки имеет набор атрибутов name, она не будет отправлена ​​в значениях post/get, так как элемент теперь отключен. Это нормальное поведение.

Способ преодоления этой проблемы - использование элементов скрытой формы.

Answer 5

Если вы отключите кнопку, то ее пара значений name = value действительно не будет отправлена ​​в качестве параметра. Но остаток параметров должен быть отправлен (пока их соответствующие входные элементы и родительская форма не будут отключены). Вероятно, вы тестируете кнопку только или другие поля ввода или даже форма отключены?

Answer 6

Вы должны сначала отправить форму, а затем изменить значение вашего представить:

onClick="this.form.submit(); this.disabled=true; this.value='Sending…'; " 

Answer 7

трюк с задержкой на кнопку отключить, и отправить форму, вы можете использовать window.setTimeout('this.disabled=true',0); да еще и с 0 MS работает

Answer 8

Использование JQuery, вы можете сделать это ..

$("#submitbutton").click(
    function() { 
     alert("Sending..."); 
     window.location.replace("path to url"); 
    } 
); 

Answer 9

Другое решение i've нас ed - переместить кнопку, а не отключать ее. В этом случае у вас нет таких «отключенных» проблем. Наконец, вы действительно хотите, чтобы люди не нажимали дважды, если кнопки там нет, они не могут этого сделать.

Вы также можете заменить его другой кнопкой.

Answer 10

    A better trick, so you don't lose the value of the button is 

    function showwait() { 
    document.getElementById('WAIT').style['display']='inline'; 
    document.getElementById('BUTTONS').style['display']='none'; 
    } 

код компресс, чтобы показать в DIV

стиль

ID = WAIT = "дисплей: нет"> Текст для отображения (конец Div)

обертывание кода, чтобы скрыть в DIV

id = КНОПКИ style = "display: inline"> ... кнопки или что скрывать с
onclick = "showwait();" (конец ДИВ)

Answer 11

function xxxx() { 
// submit or validate here , disable after that using below 
    document.getElementById('buttonId').disabled = 'disabled'; 
    document.getElementById('buttonId').disabled = ''; 
} 

Answer 12

В моем случае это было необходимо.

Disable submit button on form submit

Это отлично работает в Internet Explorer и Firefox без него, но он не работает в Google Chrome.

Проблема в том, что вы отключите кнопку, прежде чем она сможет инициировать событие отправки.

Answer 13

Вот пример перехода, который расширяется по решению Андреаса Кёберле. Он использует JQuery для обработчика событий и документов готового события, но те, может быть включен в обычный JS:

(function(document, $) { 

    $(function() { 
    $(document).on('click', '[disable-on-click], .disable-on-click', function() { 
     var disableText = this.getAttribute("data-disable-text") || 'Processing...'; 

     if(this.form) { 
     this.form.submit(); 
     } 

     this.disabled = true; 

     if(this.tagName === 'BUTTON') { 
     this.innerHTML = disableText; 
     } else if(this.tagName === 'INPUT') { 
     this.value = disableText; 
     } 
    }); 
    }); 

})(document, jQuery); 

Он может быть использован в HTML так:

<button disable-on-click data-disable-text="Saving...">Click Me</button> 
<button class="disable-on-click">Click Me</button> 
<input type="submit" disable-on-click value="Click Me" /> 

Answer 14

протестирован на IE11, FF53, GC58:

onclick="var e=this;setTimeout(function(){e.disabled=true;},0);return true;" 

Answer 15

Я думаю, что простой способ кнопку, чтобы отключить это :data => { disable_with: "Saving.." } Это будет отправить форму, а затем сделать оТКЛЮЧИТЬ, также не будет кнопка отключения я f у вас есть какие-либо проверки, например required = 'required'.

Answer 16

Я сделал трюк. Когда установлен тайм-аут, он отлично работает и отправляет все значения.

$(document).ready(function() { 
     document.getElementById('btnSendMail').onclick = function() { 
      setTimeout(function() { 
       document.getElementById('btnSendMail').value = 'Sending…'; 
       document.getElementById('btnSendMail').disabled = true; 
      }, 850); 
     } 
    });