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

User · Answer

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

User · Answer

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    lt button disable-on-click data-disable-text  Saving     gt Click Me lt  button gt   lt button class  disable-on-click  gt Click Me lt  button gt   lt input type  submit  disable-on-click value  Click Me    gt

User · Answer

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

User · Answer

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

User · Answer

You should first submit your form and then change the value of your submit   onClick  this form submit    this disabled true  this value  Sending

User · Answer

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

User · Answer

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

User · Answer

function xxxx        submit or validate here   disable after that using below   document getElementById  buttonId   disabled    disabled     document getElementById  buttonId   disabled

User · Answer

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

User · Answer

Using JQuery  you can do this        submitbutton   click     function           alert  Sending             window location replace  path to url

User · Answer

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

User · Answer

You need to disable the button in the onsubmit event of the  lt form gt     lt form action     method  POST  onsubmit  disableButton    gt       lt input name  txt  type  text  required   gt       lt button id  btn  type  submit  gt Post lt  button gt   lt  form gt    lt script gt      function disableButton             var btn   document getElementById  btn            btn disabled   true          btn innerText    Posting            lt  script gt    Note  this way if you have a form element which has the required attribute will work

User · Answer

I think easy way to disable button is  data   gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt asp button id  btnAbort  runat  server  OnClick  btnAbort Click  OnClientClick  if   abort     return false     UseSubmitBehavior  false  text  Abort   gt  lt  asp button gt    I had issues because  net can change the name of the button  function abort         if  confirm   lt asp Literal runat  server  Text  Do you want to abort     gt               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

User · Answer

tested on IE11  FF53  GC58    onclick  var e this setTimeout function   e disabled true   0  return true

[javascript] How to disable submit button once it has been clicked?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jsp

Examples related to form-submit