Disable submit button ONLY after submit

Question

I have the following HTML and jquery    lt html dir  ltr  lang  en  gt   lt head gt   lt  head gt   lt body gt    lt h2 gt Test disabling submit button for 1 minute    lt  h2 gt    lt br  gt    lt p style  text-align center  gt    lt form id  yourFormId  name  yourFormId  method  post  action     gt    lt input type  submit  class  submitBtn  value  I Accept   gt   lt  form gt   lt  p gt       lt  --script to disable the submit button -- gt   lt script src  https   ajax googleapis com ajax libs jquery 1 7 2 jquery min js  gt     lt  script gt   lt script type  text javascript  gt     document  ready function              submitBtn   click function                  submitBtn   attr  disabled   true           return true                lt  script gt   lt  --script ends here-- gt    lt  body gt   lt  html gt    As its stands the submit button gets disabled when pressed  However once pressed it does not seem perform the submit  If I removed the jquery to disable the button  the button then performs the submit normally   How can I disable the button only after it has performed the submit  the current jquery above seems to conflict with the submit operation   Any suggestions to resolve this issue would be extremely helpful

User · Answer

Test with a setTimeout  that worked for me and I could submit my form  refers to this answer https   stackoverflow com a 779785 5510314    document  ready function              btnSubmit   click function              setTimeout function      disableButton       0                function disableButton                 btnSubmit   prop  disabled   true

User · Answer

Not that I recommend placing JavaScript directly into HTML  but this works in modern browsers  not IE11  to disable all submit buttons after a form submits   lt form onsubmit  quot this querySelectorAll   type submit    forEach b   gt  b disabled   true  quot  gt

User · Answer

As a number of people have pointed out  disabling the submit button has some negative side effects  at least in Chrome it prevents the name value of the button pressed from being submitted   My solution was to simply add an attribute to indicate that submit has been requested  and then check for the presence of this attribute on every submit  Because I m using the submit function  this is only called after all HTML 5 validation is successful  Here is my code         form myform   submit function  e           Check if we have submitted before     if       submit-btn   attr  attempted       true              stop submitting the form because we have already clicked submit        e preventDefault              else             submit-btn   attr  attempted    true

User · Answer

I faced the same problem  Customers could submit a form and then multiple e-mail addresses will receive a mail message  If the response of the page takes too long  sometimes the button was pushed twice or even more times    I tried disable the button in the onsubmit handler  but the form wasn t submitted at all  Above solutions work probably fine  but for me it was a little bit too tricky  so I decided to try something else   To the left side of the submit button  I placed a second button  which is not displayed and is disabled at start up    lt button disabled class  btn btn-primary  type button id  btnverzenden2  style  display  none  gt  lt span class  glyphicon glyphicon-refresh  gt  lt  span gt  Sending mail lt  button gt      lt button class  btn btn-primary  type submit name verzenden id  btnverzenden  gt Send lt  button gt    In the onsubmit handler attached to the form  the  real  submit is hidden and the  fake  submit is shown with a message that the messages are being sent   function checkinput    submit handler                          btnverzenden   hide     lt   real submit button will be hidden         btnverzenden2   show     lt   fake submit button gets visible                    This worked for us  I hope it will help you

User · Answer

Add the disable part in the submit event     document  ready function              yourFormId   submit function                  submitBtn   attr  disabled   true           return true

User · Answer

document  ready function           body  submit function              var btn     this  find  quot input type submit  focus quot            if   btn  prop  quot id quot       quot YourButtonID quot                 btn  attr  quot disabled quot    quot true quot

User · Answer

Reading the comments  it seems that these solutions are not consistent across browsers  Decided then to think how I would have done this 10 years ago before the advent of jQuery and event function binding   So here is my retro hipster solution    lt script type  text javascript  gt  var  formConfirm submitted   false   lt  script gt   lt form name  frmConfirm  onsubmit  if   formConfirm submitted    false     formConfirm submitted   true return true  else  alert  your request is being processed     return false      action    method  GET  gt    lt input type  submit  value  submit - but only once    gt   lt  form gt    The main point of difference is that I am relying on the ability to stop a form submitting through returning false on the submit handler  and I am using a global flag variable - which will make me go straight to hell   But on the plus side  I cannot imagine any browser compatibility issues - hey  it would probably even work in Netscape

User · Answer

This is the edited script  hope it helps       lt script type  text javascript  gt            function                    yourFormId   on  submit   function                    return false                      submitBtn   attr  disabled  true     disable the submit here                   send the form data via ajax which will not relaod the page and disable the submit button                   ajax                      url          your url to submit the form                     data             yourFormId   serializeArray        your data to send here                     type        POST                      success    function resp                           alert resp        or whatever                                           error      function resp                                                                             lt  script gt

User · Answer

I put this in my global code to work on all submit buttons      input type  submit     on  click   function  e          this  attr  disabled   true         this  closest  form   submit

User · Answer

Hey this works        function             submitBtn   click function                 submitBtn   attr  disabled   true              yourFormId   submit

User · Answer

My problem was solved when i add bind section to my script file   Totally i did this 2 steps    1 - Disable button and prevent double submitting       form   submit function            this  find   submit   attr  disabled    disabled          2 - Enable submit button if validation error occurred       form   bind  invalid-form validate   function            this  find   submit   prop  disabled   false

User · Answer

This solution has the advantages of working on mobile and being quite simple    lt form     onsubmit  myButtonValue disabled   true  return true   gt

User · Answer

function            input type  submit     click function                this  attr  disabled   true                       thant s it

[javascript] Disable submit button ONLY after submit

Examples related to javascript

Examples related to jquery

Examples related to button

Examples related to submit