How to prevent form from submitting multiple times from client side

Question

Sometimes when the response is slow  one might click the submit button multiple times   How to prevent this from happening

User · Answer

Use this code in your form it will handle multiple clicks    lt script type  text javascript  gt        document  ready function                form   submit function                   this  submit function                     return false                              return true                             lt  script gt    it will work for sure

User · Answer

You can prevent multiple submit simply with    var Workin   false      form   submit function        if Workin  return false     Workin  true         codes here        Once you finish turn the Workin variable into false        to enable the submit event again    Workin   false

User · Answer

You could also display a progress bar or a spinner to indicate that the form is processing

User · Answer

Client side form submission control can be achieved quite elegantly by having the onsubmit handler hide the submit button and replace it with a loading animation  That way the user gets immediate visual feedback in the same spot where his action  the click  happened  At the same time you prevent the form from being submitted another time   If you submit the form via XHR keep in mind that you also have to handle submission errors  for example a timeout  You would have to display the submit button again because the user needs to resubmit the form   On another note  llimllib brings up a very valid point  All form validation must happen server side  This includes multiple submission checks  Never trust the client  This is not only a case if javascript is disabled  You must keep in mind that all client side code can be modified  It is somewhat difficult to imagine but the html javascript talking to your server is not necessarily the html javascript you have written   As llimllib suggests  generate the form with an identifier that is unique for that form and put it in a hidden input field  Store that identifier  When receiving form data only process it when the identifier matches   Also linking the identifier to the users session and match that  as well  for extra security   After the data processing delete the identifier   Of course  once in a while  you d need to clean up the identifiers for which never any form data was submitted  But most probably your website already employs some sort of  garbage collection  mechanism

User · Answer

I know you tagged your question with  javascript  but here s a solution that do not depends on javascript at all   It s a webapp pattern named PRG  and here s a good article that describes it

User · Answer

Most simple solutions is that disable the button on click  enable it after the operation completes  To check similar solution on jsfiddle      click here  1    And you can find some other solution on this answer

User · Answer

Use unobtrusive javascript to disable the submit event on the form after it has already been submitted  Here is an example using jQuery   EDIT  Fixed issue with submitting a form without clicking the submit button  Thanks  ichiban      body   on  submit    form   function           this  submit function             return false              return true

User · Answer

This works very fine for me  It submit the farm and make button disable and after 2 sec active the button    lt button id  submit  type  submit  onclick  submitLimit    gt Yes lt  button gt   function submitLimit     var btn   document getElementById  submit   setTimeout function         btn setAttribute  disabled    disabled       1    setTimeout function         btn removeAttribute  disabled       2000      In ECMA6 Syntex  function submitLimit     submitBtn   document getElementById  submit     setTimeout      gt    submitBtn setAttribute  disabled    disabled      1    setTimeout      gt    submitBtn removeAttribute  disabled      4000

User · Answer

You can try safeform jquery plugin          example   safeform       timeout  5000     disable form on 5 sec  after submit     submit  function event               put here validation and ajax stuff                no need to wait for timeout  re-enable the form ASAP           this  safeform  complete            return false

User · Answer

Disable the submit button soon after a click  Make sure you handle validations properly  Also keep an intermediate page for all processing or DB operations and then redirect to next page  THis makes sure that Refreshing the second page does not do another processing

User · Answer

lt h3 gt Form lt  h3 gt   lt form action    id  theform   gt   lt div class  row  gt       lt div class  quot form-group col-md-4 quot  gt               lt label for  quot name quot  gt Name  lt  label gt               lt input type  text  name  name  class  form-control   gt       lt  div gt   lt  div gt     lt div class  row  gt       lt div class  quot form-group col-md-4 quot  gt               lt label for  quot email quot  gt Email  lt  label gt               lt input type  text  name  email  class  form-control   gt       lt  div gt   lt  div gt     lt div class  row  gt       lt div class  quot form-group col-md-4 quot  gt            lt input class  btn btn-primary pull-right  type  quot button quot  value  quot Submit quot  id  btnsubmit    gt          lt  div gt   lt  div gt   lt  form gt      lt script gt         function                   btnsubmit   on  click  function                     this  val  Please wait                  attr  disabled   disabled                theform   submit                               lt  script gt

User · Answer

lt form onsubmit  if submitted  return false  submitted   true  return true  gt

User · Answer

Hash the current time  make it a hidden input on the form  On the server side  check the hash of each form submission  if you ve already received that hash then you ve got a repeat submission   edit  relying on javascript is not a good idea  so you all can keep upvoting those ideas but some users won t have it enabled  The correct answer is to not trust user input on the server side

User · Answer

On the client side  you should disable the submit button once the form is submitted with javascript code like as the method provided by  vanstee and  chaos   But there is a problem for network lag or javascript-disabled situation where you shouldn t rely on the JS to prevent this from happening   So  on the server-side  you should check the repeated submission from the same clients and omit the repeated one which seems a false attempt from the user

User · Answer

The simpliest and elegant solution for me   function checkForm form     Submit button clicked       form myButton disabled   true      form myButton value    Please wait          return true      lt form method  POST  action       onsubmit  return checkForm this    gt               lt input type  submit  name  myButton  value  Submit  gt   lt  form gt    Link for more

User · Answer

Just to add to the possible answers without bypassing browser input validation     document   ready function             btn-submit   on  click   function             if this form checkValidity                    this  attr  disabled    disabled                  this  val  Submitting                   this form submit

User · Answer

Using JQuery you can do      input submit   click  function     this disabled   true         amp          input submit   keypress  function e         if  e which    13            this disabled   true

User · Answer

Here s  simple way to do that    lt form onsubmit  return checkBeforeSubmit    gt    some input  lt input type  text  gt     lt input type  submit  value  submit    gt   lt  form gt    lt script type  text javascript  gt    var wasSubmitted   false          function checkBeforeSubmit          if  wasSubmitted            wasSubmitted   true          return wasSubmitted                return false             lt  script gt

User · Answer

the best way to prevent multiple from submission is this just pass the button id in the method       function DisableButton             document getElementById  btnPostJob   disabled   true            window onbeforeunload   DisableButton

User · Answer

This allow submit every 2 seconds  In case of front validation     document  ready function            form debounce    submit function e            const submiting       this  data  submiting             if  submiting                  this  data  submiting   true                setTimeout      gt                      this  data  submiting   false                  2000                return true                     e preventDefault            return false

User · Answer

An alternative to what was proposed before is   jQuery  form   submit function           this  find   submit   attr   disabled   disabled            the rest of your code

User · Answer

The most simple answer to this question as asked   Sometimes when the response is slow  one might click the submit button multiple times  How to prevent this from happening    Just Disable the form submit button  like below code    lt form     onsubmit  buttonName disabled true  return true   gt     lt input type  submit  name  buttonName  value  Submit  gt   lt  form gt    It will disable the submit button  on first click for submitting  Also if you have some validation rules  then it will works fine  Hope it will help

User · Answer

To do this using javascript is bit easy  Following is the code which will give desired functionality     x000D   x000D      disable   on  click   function    x000D          disable   attr  disabled   true   x000D        x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button id  disable  gt Disable Me  lt  button gt  x000D   x000D   x000D

User · Answer

I tried vanstee s solution along with asp mvc 3 unobtrusive validation  and if client validation fails  code is still run  and form submit is disabled for good  I m not able to resubmit after correcting fields   see bjan s comment   So I modified vanstee s script like this      form   submit function          if    this  valid                this  submit function                  return false                      return true            else           return false

[javascript] How to prevent form from submitting multiple times from client side?

Examples related to javascript

Examples related to submit