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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

Incredible Demos

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

  • By
    Create an Animated Sliding Button Using MooTools

    Buttons (or links) are usually the elements on our sites that we want to draw a lot of attention to. Unfortunately many times they end up looking the most boring. You don't have to let that happen though! I recently found a...

Discussion

  1. Dave Doyle

    As an aside, if you’re also using any javascript validation, disable the submit button only after you’ve passed the validation tests.

    Also, if the form is output programattically and the results stored in a DB, you can incorporated a unique hidden value in the form and redirect to an error page on duplicate submission detection.

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

  3. Hugo

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

  4. Hugo

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

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

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

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

  8. Ava

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

  9. roshan

    Thank boss..u saved my time

  10. 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!