Monday, July 26, 2021

How to Disable submit button in HTML JavaScript? Multiple Form Submission Solution Example

Avoiding multiple submissions of HTML form or POST data is a common requirement in Java web applications. Thankfully, You can prevent multiple submissions by disabling the submit button in HTML and JavaScript itself, rather than handling it on the server-side. This is a very common requirement while developing a web application using Servlet and JSP or any other web technology. At the same time, there is a lot of information and noise available in web, and its very hard to find a simple approach to the disable submit button. When I search for a simple way to disable the submit button in HTML and JavaScript, I was overwhelmed by responses on forums and various online communities.
Those are good for intermediate HTML and JavaScript developer but a beginner might just get overwhelmed by the amount of information presented and rather confused to use which the approach will work, how exactly should I disable submit button to prevent multiple form submissions etc. 

That drives me to write this post and summarize the simplest possible approach to disable submit button using HTML and JavaScript. I see there could be issues related to browser compatibility which we can talk once we know the simplest approach and my the intention is to add those issues and there remedy as and when I know about it to keep this article update, relevant and simple. 

By the way How to avoid multiple submission of HTML form is also a popular JSP Interview question and worth preparing.


How to disable submit button using JavaScript

You don't need to do a lot just add  this.disabled='disabled' on onclick event handler of button like below:

<form action="submit.jsp" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form" onclick="this.disabled='disabled'" />
</form>

This JavaScript code will disable the submit button once clicked. Instead of this, which represent current element similar to Java this keyword, You can also use document.getElementById('id') but this is short and clear.

Now some browser has problem to submit data from disabled button. So, its better to call form.submit() from onclick itself to submit form data, which makes your code to onclick="this.disabled=true;this.form.submit(). Particularly, on Internet Explorer a disabled submit button doesn't submit form data to server. You can also change value or text of submit button from submit to "Submitting...." to indicate user that submit is in progress. Final JavaScript code should look like:

<form action="submit.jsp" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form" onclick="this.value='Submitting ..';this.disabled='disabled'; this.form.submit();" />
</form>

That's all you need to disable submit button using HTML and JavaScript to prevent multiple submissions.

Once you are comfortable with a simple way of disabling the submit button you may go and explore multiple ways to prevent multiple form submissions or disable submit button. As I said if you are a beginner to JavaScript or HTML then it takes some time to get hold of these tricks. If you are using Internet Explorer and not calling this.form.submit() then the only button will be disabled but the form will not be submitted so always call this.form.submit().



form.submit() doesn't include submit button name in request

how to disable submit button to avoid multiple submission of form in JavascriptThere is a caveat while using JavaScript to submit form, it doesn't include name of submit button as request parameter. If you are checking for name of submit button on server side your code will fail. For example, following code which is checking for SUBMIT button as request parameter using Spring MVC WebUtils class.


if(WebUtils.hasSubmitParameter(request, "SUBMIT")){
 //form has been submitted start processing.
}

This code will fail if form is submitted by this.form.submit(), rather than clicking submit button. Traditionally name of submit button is included in HTTP request only if form is submitted by clicking submit button otherwise no. Fortunately there is a workaround to this problem, You can call document.form_name.submit_name.click() to simulate click on submit button. 

This will include name of submit button in HTTP  POST request and above Spring MVC example will work as expected. If you don't have multiple buttons on screen and only have one submit button than you can also use HTML hidden input field to send name of  submit button as shown in below example:

<input type="hidden" value="meta data" name="SUBMIT" id="submit_hidden" />

Since code is only checking for any named parameter with name SUBMIT it will work.

What if you have multiple submit buttons on one screen

There are cases when you have multiple HTML button in one screen like "Accept" or "Decline", "Yes or "No" , Accept" or "Reject" etc. In this case, clicking one button should disable both buttons because there are intended for one operation. 

In order to disable multiple submit button in onclick, You need to explicitly disable those buttons. As in following example, if you have two buttons with name accept and decline , we are disabling both when any of the button get clicked.

<input type="submit"
       id="accept"
       name="ACCEPT"
       value="Accept"          
       onclick="this.disabled='disabled';
                document.getElementById('reject').disabled='disable';
                this.form.submit();" />

<input type="submit"
       id="reject"
       name="REJECT"
       value="Reject"    
       onclick="this.disabled='disabled';
               document.getElementById('accept').disabled='disable';
               this.form.submit();" />

This code may get clutter if you have more than two buttons and its best to write a JavaScript function to disable all submit buttons on that group.

That’s all on How to disable the submit button in HTML and prevent multiple form submissions on Server. Anyway, there are multiple ways to accomplish this, both on the client-side and server-side. I prefer to do this on the client-side using JavaScript to avoid server round trips. Let us know how do you prevent multiple form submissions in your web application.


Other Java web tutorials and Interview Questions you may like

P S. - Given the importance of Unit testing in software development, and with the growing importance of JavaScript in web development, I always feel the need for a good book on unit testing my JavaScript code. JavaScript Unit testing is a good read to fill that gap.

10 comments:

  1. I have a problem with this code example.. what if i have missed the mandatory field and clicked the submit button.

    next time it is not allowing the user to enter the field :(

    ReplyDelete
  2. @Arun, if you have client side validation than do it before submitting form. here we talked about disabling submit button and preventing multiple submissions, validation should be before that.

    ReplyDelete
  3. This article tells just the half of the story. You'll need to enable the button back at some point in time, I guess :)

    ReplyDelete
  4. @Yakov Fain, Once you send request to server, either you will go to another page or even if you return to same page, it would have been reloaded which makes the submit button enabled again.

    ReplyDelete
  5. I usually use Javascript for form submission, allowing me to validate data and do other stuff before the form is submitted. I noticed that "return false;" in the button onclick works better for this scenario as the example above disables the button and prevents any further use.

    Example for a button:
    id="btnShowReport" onclick="submitData();return false;"

    where "submitData()" contains my validation and the call to submit the form.

    Robert Stout
    bobinsanantonio@yahoo.screwspam.com

    ReplyDelete
  6. @Javin, re your reply to Yakov Fain: Your example works if you're loading a new page in "_self". Occasionally, however, you need to send to _blank. "return false" works in both instances.

    Robert Stout
    bobinsanantonio@yahoo.screwspam.com

    ReplyDelete
  7. @3rd Anonymous before me:
    Before you're saying another people's example is shit, let's see if you can make any useful tutorial by yourself, shit. I've tried this tutorial, and it works. Or maybe, the difference is in the brain. I don't know. I feel pity for you. let's talk in civilized mode, because uncivilized people drives me uncivilized too.

    ReplyDelete
  8. Whoever made that uncivilized statement to the author's tutorial was very rude and immature. I would like to thank the author for this tutorial.

    ReplyDelete
  9. Can anyone think of a draw back for using this:
    form onsubmit="document.getElementById('submit button id').disabled='disabled';"
    would it catch multiple submissions?

    ReplyDelete
  10. can anyone help, consider an example containing 2 buttons SAVE and APPLY, apply should work after click on SAVE button only, using html and java script, thanks in advance

    ReplyDelete