How to Disable Double Click on Submit Button
This solution to prevent double clicks uses straight up Javascript - no Jquery necessary.
Prevent double clicks on form buttons.
by Scot Ranney
A lot of web users double click links and form buttons.
I've watched over the shoulder of friends, normally older friends who haven't grown up with computers, who do this and when I ask them why, the answer is basically the same. They didn't know that you could click links and buttons once. They thought it was like their computer.
The problem isn't that they click form buttons twice, the problem is whatever server side processing is going on doesn't know how to handle a double submit.
This is a bug in the server side processing system and the developer should have taken double submits into consideration when creating their Miva Module, php script, or whatever.
The main issue with that? Often you can't get the original developer to fix the issue or if they do it takes a long time for them to get around to it or figure out a solution.
In the meantime, you can add a very simple bit of javascript to any button to disable more than one click.
The Prevent Double Form Submit Fix
<button type="submit" id="submitbutton" onclick="document.getElementById('submitbutton').disabled = true;">Click Me</button>
Normal button:
Single click button:
That disabled any further clicking of the button but it doesn't really show the user they clicked, so they might hurt themselves clicking over and over again while the form is being processed.
Fade the Button After Click
Let's add one more bit of js to fade the button out a bit so users have a visual cue that they clicked the button.
<button type="submit" id="submitbutton" onclick="document.getElementById('submitbutton').disabled = true;document.getElementById('submitbutton').style.opacity='0.5';">Click Me</button>
Single click button that fades out:
Now it's apparent that the button was clicked.
Jquery
Doing this with Jquery lets you get more creative with less work than doing it in pure javascript. You may want to replace the button with a spinner, or change the button text, or any number of creative options. The easiest is to hide the button and show something else, like a message (or hide the active button and replace it with an inactive button.)
These kinds of things are done using Jquery hide() and show() functions. Check out w3schools jquery show and hide tutorial on this for more information.
Related Articles
These articles might be interesting for you as well: