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=true;"

attribute to the submit button field.

Here is an example:


<form 

   method="post"

   action="/cgi-bin/myscript.cgi">

<input 

   type="submit" 

   onclick="this.disabled=true;">

</form>

That's really all there is to it.

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>

<body>

<h3>An effective method of preventing a form from being submitted more than once.</h3>

<h4>The browser must be JavaScript-enabled to submit the form.</h4>

<p>

See the "How To Disable The Submit Button" article linked at

/library/

</a>

for more information.

</p>

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>

document.write('<input type="button" name="mybutton" value="Click When Ready" onclick="return SubmitTheForm();">');

//--></script>

</noscript>

</form>

</body>

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

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 /library/

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

How To Disable The Submit Button

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

How To Disable The Submit Button

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions