How to disable submit button once it has been clicked?

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.

This is probably not the fault of the calls you show. Please show the full HTML of the form. — Pekka, Jul 29 '10 at 20:52
Don't use the onclick event of the submit button - use the onsubmit event of the form. Otherwise you won't catch a submission from the keyboard. — Nick, Jul 29 '10 at 21:08

score 120 · Answer 1 · answered Jul 29 '10 at 20:59

120

You should first submit your form and then change the value of your submit:

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

answered Jul 29 '10 at 20:59

Andreas Köberle

98,250
56
262
287

6

This is the best answer. Some browsers don't know to submit the form beforehand, and this solution works around that. – Nathanael Aug 12 '14 at 17:02
9

onclick should be lowercase – MadMaardigan Feb 05 '15 at 15:04
1

Won't work as expected if HTML5 validation is triggered first. – cyrotello Oct 05 '17 at 04:39
1

For me, 'this.disabled=true' prevents back end function from firing, even though it appears after the submit! To get around this I implemented a bool value and if statement to check first or subsequent clicks, and returned false for subsequent. – Radderz Oct 13 '17 at 16:50
Working with ASP.NET Update Panel I disabled the Submit behavior. 'OnClick="btnSave_Click" OnClientClick="this.disabled=true; this.value='Saving ... Please Wait.';" UseSubmitBehavior="false"' – Muhammad Ali Nov 09 '17 at 22:07
doesn't respect formaction attribute – Vladislav Kostenko Jun 08 '18 at 22:08
in a javascript handler, `this` would instead be `event.currentTarget`. – phil294 Aug 16 '19 at 14:45
This doesn't work for me. The values of the form do not submit. – Altimus Prime Sep 28 '20 at 20:49
Note, if you're trying to submit an AJAX / remote form, use `this.form.requestSubmit()` instead. Works a treat! – Joshua Pinter May 05 '22 at 03:08

score 70 · Accepted Answer · answered Jul 29 '10 at 20:53

70

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…';"

answered Jul 29 '10 at 20:53

migajek

8,374
14
73
115

31

Careful though as this does not work in IE8 and Chrome...well it works in that it does what the script says to do, but a consequence is that it also disables the submitting of the form. – Shawn de Wet Mar 08 '13 at 08:58
1

See @andreaskoberle's answer – Shawn de Wet Jan 21 '16 at 04:59
9

for `button type=submit` tags replace `this.value` with `this.innerText` – Edgar Ortega Dec 18 '18 at 11:37
@Andreas Köberle answer below is better, especially if using any of the ASP.NET frameworks. – Kevin Finck Oct 06 '20 at 23:06

score 30 · Answer 3 · answered Jun 14 '17 at 15:19

30

tested on IE11, FF53, GC58 :

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

answered Jun 14 '17 at 15:19

6

This should be accepted ; others doesn't send the form – Damien Romito Jul 24 '19 at 16:11
This works great, but how do I change the "value" when clicked? – robert0 Jul 13 '21 at 10:29

A-Sharabiani · Answer 4 · 2019-03-07T23:08:22.100

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.

score 10 · Answer 5 · answered Jul 29 '10 at 20:58

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.

score 7 · Answer 6 · answered Jul 29 '10 at 22:22

7

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

answered Jul 29 '10 at 22:22

Frenchi In LA

3,099
3
24
41

1

but what if the user presses the button in that fraction of time ? – jospratik Sep 26 '13 at 07:21

score 4 · Answer 7 · answered Jul 30 '10 at 05:18

4

Using JQuery, you can do this..

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

answered Jul 30 '10 at 05:18

Manie

2,018
2
16
18

3

Please don't use `alerts` for that, they block the page until clicked – Edgar Ortega Dec 18 '18 at 11:36

score 2 · Answer 8 · answered Jul 29 '10 at 20:58

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?

score 2 · Answer 9 · answered Sep 08 '16 at 14:29

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" />

I like this solution because it follows the 'Don't Repeat Yourself' (DRY) principle. Once the first chunk is added you can re-use it simply by using a class. — Calabacin, Apr 14 '20 at 10:04

score 1 · Answer 10 · answered Jul 24 '13 at 13:53

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.

score 1 · Answer 11 · edited Dec 03 '13 at 08:35

1

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

edited Dec 03 '13 at 08:35

Manuel

3,638
6
32
46

answered Dec 03 '13 at 08:16

user3060544

249
2
5

score 1 · Answer 12 · answered Jul 29 '10 at 20:52

1

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.

answered Jul 29 '10 at 20:52

Mitch Dempsey

36,881
6
65
73

1

If you don't put "this.form.submit()" then form will not submit in this case. – Manish Champaneri Aug 31 '17 at 06:15
i am using if i refresh the page disable gone, how to solve this? – Gem Sep 28 '19 at 10:52

score 0 · Answer 13 · answered Oct 19 '13 at 16:51

 
    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)

score 0 · Answer 14 · edited May 23 '17 at 12:02

0

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jul 23 '15 at 16:57

Pascal Desjardins

1

1

It's generally good practice to show the appropriate code in your answer, instead of just a link. – Jordan Davis Jul 23 '15 at 17:04

score 0 · Answer 15 · answered Jul 29 '10 at 20:56

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).

score 0 · Answer 16 · answered Aug 08 '17 at 09:09

0

I think easy way to disable button is :data => { disable_with: "Saving.." } This will submit a form and then make a button disable, Also it won't disable button if you have any validations like required = 'required'.

answered Aug 08 '17 at 09:09

chaitanya

1,944
3
17
35

2

This behavior seems to be Ruby on Rails specific. – Edgar Ortega Dec 18 '18 at 11:35

score 0 · Answer 17 · answered May 06 '19 at 20:21

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!

score -1 · Answer 18 · answered Mar 09 '18 at 01:27

-1

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

answered Mar 09 '18 at 01:27

Hasan Tuna Oruç

1,274
13
14

people will click several times in 850ms – cweiske Apr 23 '21 at 15:01

How to disable submit button once it has been clicked?

18 Answers18

Linked