Disable Submit Button Upon Form Submission
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.
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Page Visibility API]()
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
![Create a Context Menu with Dojo and Dijit]()
Context menus, used in the right type of web application, can be invaluable. They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available. Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...
![CSS Counters]()
Counters. They were a staple of the Geocities / early web scene that many of us "older" developers grew up with; a feature then, the butt of web jokes now. CSS has implemented its own type of counter, one more sane and straight-forward than the ole...
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.
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.
How would you write a code to “redirect to an error page on duplicate submission detection.”
oh, and my middle name is David. It may not be Dave but it is pretty close. :D
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. :)
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.
Great way of prevention. Thanks a lot. I just implemented it on one of my websites.
Does anyone have a unit test code for testing the submit button disabled when click it?
Thank boss..u saved my time
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