Disable Submit Button Upon Form Submission

By  on  

Multiple clicks on a "Submit" button can cause duplicate processing if your programming is slow or the user's connection is lagging. Duplicate processing can include duplicate database records, multiple emails, or different types of errors. JavaScript provides an easy way to disable the multiple submission of a form once the form has been submitted.

The Code

In the HTML, use the following "onsubmit" information:

It's important to trigger the even on form submission -- not everyone clicks the "submit" button. You will also need to give your submit button the submit_button ID attribute.

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    Create a Dojo Lightbox with dojox.image.Lightbox

    One of the reasons I love the Dojo Toolkit is that it seems to have everything.  No scouring for a plugin from this site and then another plugin from that site to build my application.  Buried within the expansive dojox namespace of Dojo is

Discussion

  1. Great tips (and name) Dave!

    I’ve never been a fan of “disabling” elements on a website, but if it can save a developer lots of cleanup in the long run, I say do it.

  2. Hugo

    How would you write a code to “redirect to an error page on duplicate submission detection.”

  3. Hugo

    oh, and my middle name is David. It may not be Dave but it is pretty close. :D

  4. thanks for the tip… might also be a good idea to apply some sort of visual display so your users know the server is working. :)

  5. Rohini

    Hi David,

    I’m having a really hard time trying to disable a submit (IMAGE) button when the page is submitted in APEX 3.2.
    I cannot get the SUBMIT button to disable itself. Somehow this only works on HTML Buttons rather than IMAGES from CSS Templates.
    Would appreciate it if you could suggest an alternative.
    Thanks.

  6. Great way of prevention. Thanks a lot. I just implemented it on one of my websites.

  7. Ava

    Does anyone have a unit test code for testing the submit button disabled when click it?

  8. roshan

    Thank boss..u saved my time

  9. manoj

    i can’t disable the submit button because i have some validation before page submit.if the validation failed the button is permanently disabled please some one assist

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!