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

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

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

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

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

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

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

Вам необходимо отключить кнопку в событии onsubmit <form>:

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

Примечание: таким образом, если у вас есть элемент формы с атрибутом required, будет работать.

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

Один способ решить эту проблему - использовать скрытые элементы формы.

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

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

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

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

Вот пример, который расширяет решение Андреаса Кёберле. Он использует 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" />

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

Еще одно решение, которое я использовал, - это переместить кнопку, а не отключать ее. В этом случае у вас не будет проблем с "отключением". Наконец, вы действительно хотите, чтобы люди не нажимали дважды, если кнопки нет, они не смогут этого сделать.

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

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

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

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

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

 
    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 style = "display: none"> текст для отображения (конец div)

обернуть код, чтобы скрыть его в div

id = BUTTONS style = "display: inline"> ... кнопки или что угодно, что нужно скрыть с помощью
onclick = "showwait ();" (конец div)

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

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

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

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

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

В этом рабочем примере пользователь подтверждает в JavaScript, что он действительно хочет прервать выполнение. Если true, кнопка отключена, чтобы предотвратить двойной щелчок, а затем будет запущен код, за которым обновляется база данных.

<asp:button id="btnAbort" runat="server" OnClick="btnAbort_Click" OnClientClick="if (!abort()) {return false;};" UseSubmitBehavior="false" text="Abort" ></asp:button>

У меня были проблемы, потому что .net может изменить имя кнопки

function abort() {
    if (confirm('<asp:Literal runat="server" Text="Do you want to abort?" />')) {
        var btn = document.getElementById('btnAbort');
        btn.disabled = true;
        btn.innerText = 'Aborting...'
        return true;
    }
    else {
        return false;
    }  
}

Поскольку вы переопределяете OnClick с помощью OnClientClick, даже если ваш метод проверки завершится успешно, код, стоящий за ним, не будет работать. Вот почему вы устанавливаете UseSubmitBehavior на false, чтобы он работал

PS: Вам не нужен OnClick, если ваш код находится на vb.net!

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

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