Disable submit button on form submit

Question

I wrote this code to disable submit buttons on my website after the click      input type submit    click function          this  attr  disabled    disabled          Unfortunately  it doesn t send the form  How can I fix this   EDIT I d like to bind the submit  not the form

User · Answer

Want to submit value of button as well and prevent double form submit  If you are using button of type submit and want to submit value of button as well  which will not happen if the button is disabled  you can set a form data attribute and test afterwards     Add class disableonsubmit to your form       document  ready function                 form disableonsubmit   submit function e                if    this  data  submitted       true                       Form is already submitted                 console log  Form is already submitted  waiting response                        Stop form from submitting again                 e preventDefault                  else                      Set the data-submitted attribute to true for record                   this  data  submitted   true

User · Answer

The following worked for me   var form enabled   true      ready function              allow the user to submit the form only once each time the page loads            form id   on  submit   function                   if  form enabled                           form enabled   false                         return true                                   return false                    This cancels the submit event if the user tries to submit the form multiple times  by clicking a submit button  pressing Enter  etc

User · Answer

Button Code   lt button id  submit  name  submit  type  submit  value  Submit  gt Submit lt  button gt    Disable Button  if When You Disable the button this Case        input type  submit     prop  disabled   true     else       input type  submit     prop  disabled   false        Note  You Case may Be Multiple this time more condition may need

User · Answer

Do it onSubmit        form id   submit function          this  find   input type submit    prop  disabled   true         What is happening is you re disabling the button altogether before it actually triggers the submit event   You should probably also think about naming your elements with IDs or CLASSes  so you don t select all inputs of submit type on the page   Demonstration  http   jsfiddle net userdude 2hgnZ    Note  I use preventDefault   and return false so the form doesn t actual submit in the example  leave this off in your use

User · Answer

Simple and effective solution is   lt form     onsubmit  myButton disabled   true  return true   gt               lt input type  submit  name  myButton  value  Submit  gt   lt  form gt    Source  here

User · Answer

Specifically if someone is facing problem in Chrome   What you need to do to fix this is to use the onSubmit tag in the  lt form gt  element to set the submit button disabled  This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead       lt form name   myform  method  POST  action  dosomething php  onSubmit  document getElementById  submit   disabled true   gt         lt input type  submit  name  submit  value  Submit  id  submit  gt    lt  form gt

User · Answer

How to disable submit button   just call a function on onclick event and    return true to submit and false to disable submit   OR call a function on window onload like    window onload   init      and in init   do something like this    var theForm   document getElementById    theForm      theForm onsubmit       what ever you want to do

User · Answer

Your code actually works on FF  it doesn t work on Chrome   This works on FF and Chrome     document  ready function                Solution for disabling the submit temporarily for all the submit buttons             Avoids double form submit             Doing it directly on the submit click made the form not to submit in Chrome             This works in FF and Chrome             form   on  submit   function e               console log  submit2   e    this  find   clicked true                var submit     this  find   clicked true    0             if   submit hasAttribute  disabled                            submit setAttribute  disabled   true               setTimeout function                  submit removeAttribute  disabled                   1000                         submit removeAttribute  clicked              e preventDefault                            type submit    on  click touchstart   function              this setAttribute  clicked   true                              lt  script gt

User · Answer

This should take care of it in your app       submit   closest  form   submit function            submit   attr  disabled    disabled

User · Answer

A more simplier way  I ve tried this and it worked fine for me       input type submit    prop  disabled   true

User · Answer

I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons   http   malsup com jquery block  element  Then my buttons have a class autobutton          autobutton   click       function event            var nv     this  html            var nv2     lt span class  fa fa-circle-o-notch fa-spin  aria-hidden  true  gt  lt  span gt      nv            this  html nv2           var form     this  parents  form first               this  block   message  null             form submit                                     Then a form is like that    lt form gt        lt button class  autobutton  gt Submit lt  button gt      lt  form gt

User · Answer

Disabled controls do not submit their values which does not help in knowing if the user clicked save or delete    So I store the button value in a hidden which does get submitted  The name of the hidden is the same as the button name  I call all my buttons by the name of button   E g   lt button type  submit  name  button  value  save  gt Save lt  button gt   Based on this I found here  Just store the clicked button in a variable      document  ready function        var submitButton          document  on  click     submit   function  e                   you may choose to remove disabled from all buttons first here          submitButton      this                  document  on  submit    form   function e                var form      this           var hiddenButton        button   form            if  IsNull hiddenButton                             add the hidden to the form as needed             hiddenButton        lt input gt                     attr   type   hidden   id   button   name   button                      appendTo form                      hiddenButton  attr  value   submitButton  attr  value             submitButton  attr  disabled    disabled                Here is my IsNull function  Use or substitue your own version for IsNull or undefined etc   function IsNull obj        var is      if  obj instanceof jQuery          is   obj length  lt   0      else         is   obj     null    typeof obj      undefined     obj             return is

[javascript] Disable submit button on form submit

Want to submit value of button as well and prevent double form submit?

Examples related to javascript

Examples related to jquery