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

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

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

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

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

Ответы

Ответ 1

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

в итоге вы получите onClick="this.disabled=true; this.value='Sending…';"

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

Вам необходимо отключить кнопку в событии 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 атрибутом, будет работать.

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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

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

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

Ответ 13

 
    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)

Ответ 14

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

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

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

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

Ответ 15

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

Ответ 16

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

Ответ 17

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

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

Ответ 18

В этом рабочем примере пользователь подтверждает в 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!

Ответ 19

$('form#id').submit(function(e){
//OnClick code 
$(this).children('input[type=submit]').attr('disabled','disabled');
e.preventDefault();
return false;
});