How to Disable the Submit Button
By Will Bontrager2005-04-16
How to Disable the Submit Button
|
|
If you want to prevent multiple clicks on a form submit button, disable the button.
It's easy, simple. I'll show you exactly how to do it.
Simply add the
onclick="this.disabled=trueattribute to the submit button field.
Here is an example:
<formThat's really all there is to it.
method="post"
action="/cgi-bin/myscript.cgi">
<input
type="submit"
onclick="this.disabled=true;">
</form>
Well, for most browsers, that's all there's to it. Some browsers can't disable the submit button because their programmers didn't tell them how.
And the above works only with browser that have JavaScript turned on.
If disabling the submit button most of the time is good enough, the above can do the job.
But if you must prevent a multiple click with the highest degree of effectiveness, JavaScript itself can be used to submit the form.
JavaScript-disabled browsers can't submit the form at all. It word even with browsers that can't otherwise disable the submit button -- so long as JavaScript is turned on.
To implement this, use a type="button" attribute instead of a type="submit". The button has some JavaScript that calls a function to submit the form.
The button won't function for non-JavaScript browsers, even if it's clicked on. To reduce frustration, you may wish to use JavaScript for printing the button itself so users of non-JavaScript browsers won't see it and try to click it.
Here is the code. It is a complete example web page.
<html>The JavaScript changes the button text to "Thank you!" and tries to disable it. Whether successfully disabled or not, the JavaScript blocks a second submission attempt.
<body>
An effective method of preventing a form from being submitted more than once.
The browser must be JavaScript-enabled to submit the form.
See the "How To Disable The Submit Button" article linked at
<a href="http://willmaster.com/possibilities/archives/index2.shtml" target="_blank">
http://willmaster.com/possibilities/archives/index2.shtml</a>
for more information.
<!-- The JavaScript to submit the form: -->
<script type="text/javascript" language="JavaScript"><!--
var submitted = false;
function SubmitTheForm() {
if(submitted == true) { return; }
document.myform.submit();
document.myform.mybutton.value = 'Thank You!';
document.myform.mybutton.disabled = true;
submitted = true;
}
//--></script>
<form name="myform" method="post" action="/cgi-bin/script.cgi">
<!-- The JavaScript to display the submit button: -->
<script type="text/javascript" language="JavaScript"><!--
document.write('<input type="button" name="mybutton"
value="Click When Ready" onclick="return SubmitTheForm();">');
//--></script>
<!-- Optionally, if you want to allow non-JavaScript
browsers to submit the form, add the following three lines: -->
<noscript>
<input type="submit" value="Click When Ready">
</noscript>
</form>
</body>
</html>
The code also demonstrates how to include a regular submit button for non-JavaScript browsers. Although it might seem to defeat the purpose of the code, which is to block extra clicks, this option does however allow the 3-6% without JavaScript to use the form. The code just can't check for extra clicks.
Additional information about trapping multiple clicks can be found in the "Double Click Trapper" and "Submit Button Multiple Click Trapper" articles linked from http://willmaster.com/possibilities/archives/index2.shtml
Tutorial Pages:
» How to Disable the Submit Button
Copyright 2004 Bontrager Connection, LLC
|
