单击提交按钮后如何禁用它？

Question

I have a submit button at the end of the form.

I have added the following condition to the submit button:

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

But when it moves to the next page, the parameters did not pass and null values are passed.

Answer 1

您应首先提交表单，然后更改提交的值：

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

Answer 2

Probably you're submitting the form twice. Remove the this.form.submit() or add return false at the end.

you should end up with onClick="this.disabled=true; this.value='Sending…';"

Answer 3

在IE11，FF53，GC58上测试：

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

Answer 4

Disabled HTML forms elements aren't sent along with the post/get values when you submit the form. So if you disable your submit button once clicked and that this submit button have the name attribute set, It will not be sent in the post/get values since the element is now disabled. This is normal behavior.

One of the way to overcome this problem is using hidden form elements.

Answer 5

the trick is to delayed the button to be disabled, and submit the form you can use window.setTimeout('this.disabled=true',0); yes even with 0 MS is working

Answer 6

You need to disable the button in the onsubmit event of the <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>

Note: this way if you have a form element which has the required attribute will work.

Answer 7

Using JQuery, you can do this..

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

Answer 8

I don't think you need this.form.submit() . The disabling code should run, then it will pass on the click which will click the form.

Answer 9

Another solution i´ve used is to move the button instead of disabling it. In that case you don´t have those "disable" problems. Finally what you really want is people not to press twice, if the button is not there they can´t do it.

You may also replace it with another button.

Answer 10

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

Answer 11

If you disable the button, then its name=value pair will indeed not be sent as parameter. But the remnant of the parameters should be sent (as long as their respective input elements and the parent form are not disabled). Likely you're testing the button only or the other input fields or even the form are disabled?

Answer 12

    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';
    }

wrap code to show in a div

id=WAIT style="display:none"> text to display (end div)

wrap code to hide in a div

id=BUTTONS style="display:inline"> ... buttons or whatever to hide with
onclick="showwait();" (end div)

Answer 13

In my case this was needed.

Disable submit button on form submit

It works fine in Internet Explorer and Firefox without it, but it did not work in Google Chrome.

The problem is that you are disabling the button before it can actually trigger the submit event.

Answer 14

Your question is confusing and you really should post some code, but this should work:

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

I think that when you use this.form.submit() it's doing what happens naturally when you click the submit button. If you want same-page submit, you should look into using AJAX in the submitForm() method (above).

Also, returning false at the end of the onClick attribute value suppresses the default event from firing (in this case submitting the form).

Answer 15

Here's a drop-in example that expands on Andreas Köberle's solution. It uses jQuery for the event handler and the document ready event, but those could be switched to plain 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);

It can then be used in HTML like this:

<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 16

我认为禁用按钮的简单方法是:data => { disable_with: "Saving.." }这将提交一个表单，然后禁用按钮，如果你有任何验证，如果required = 'required'. ，它也不会禁用按钮required = 'required'.

Answer 17

I did the trick. When set timeout, it works perfectly and sending all values.

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

Answer 18

In this working example, the user confirms in JavaScript that he really wants to abort. If true, the button is disabled to prevent double click and then the code behind which updates the database will run.

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

I had issues because .net can change the name of the button

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;
    }  
}

Because you are overriding the OnClick with OnClientClick, even if your validation method succeeds, the code behind wont work. That's why you set UseSubmitBehavior to false to make it work

PS: You don't need the OnClick if your code is in vb.net!

Answer 19

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

Answer 20

Okay, i did a lot of research on how to make this work perfectly. So the best option is to create a set timeout for disabling a button onclick. Now, the problem arise when there is a submit function running on the backend. Then the events become stacked in a queue and whenever the javascript "button.disabled == true" is added to the onclick event, only the first action(ie disabling the button) gets triggered and not the submit action which is running in the backend(This backend submit function can comprise of anything such as $.ajax).

For disabling Single button on click:

function() { //i always create annonymous function to avoid polluting global 
    space
    var btn = document.getElementsByClassName("btn");
    btn.onclick = function() {
        setTimeout(function() {
            backButton.disabled = true;
        }, 0);
    };
}
}();

This code will disable your button and also would run the function on the queue. timeout = 0 actually is used for firing subsequent backend tasks.

For disabling all btns in the screen:

(function() {
    let i, element, list, o;
    element = document.getElementsByClassName("classx");
    if (element) {
        element = element[0];
        list = element.getElementsByTagName("button");
        for (i = 0; i < list.length; i++) {
            o = list[i];
            o.onclick = function() {
                setTimeout(function() {
                    let i;
                    for (i = 0; i < list.length; i++) {
                        list[i].disabled = true;
                    }
                }, 0);
                return true;
            }
        }
    }
})();

This would help you disable all of the buttons present in the page. (Just use it according to your usecase.) Also, this(disabled button) is a good use case for settimeout=0, functionality description as it will "defer" the call until the currently "stacked javascript events" are finished.

Thank you and hope this helps someone's in the future.