Today is . Page created 09/24/06, updated 10/03/06
 Stop Double Clicking  
|
Today is . Page created 09/24/06, updated 10/03/06
|
Stop Double Clicking
|
[ Reload Page ]
Wouldn't it be nice if once a user clicked a submit button, we could "turn it off" so that they couldn't click it again? Using this JavaScript snippet, you'll be able to do just that.
We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.
For your Information:
Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please
"Do Not Attempt" this until you are Proficient in the aforementioned areas.
Depending on your knowledge of HTML and javascripts and forms, this is an easy one (1) part copy and paste code that gets incorporated into the "Submit" button of your form that is located in the <BODY> section of your document with "minimal" reconfigurations.
<!-- Add this code to your submit button -->
onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();"
Example:
<form action="someProgram.cgi">
<input type="submit" id="btnSubmit" value="Submit"
onclick="this.disabled=true;this.value='Submitting...'; this.form.submit();">
</form>
For your Information:
If you notice in the above snipplet of code the text Submitting.... This can be reconfigured to whatever you want the button to say after it is clicked and disabled so it can not be clicked again. Click the below "Submit" button, when that page opens (in a new window), close it and see how we reconfigured the button so it can not be submitted more than once.
[ Reload Page ]
We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]
[ Rate This Page ]