How to prevent multiple form submission by using HTML JavaScript?

When we browse some popular websites and submits a form we don’t know whether it is processed or not and we click submit button again and again hence same request goes to server more than one time. This results in unpredictable behaviour which only complicates user experience. Avoiding multiple submission of HTML form is common requirement in Web Applications using Servlet, JSP and any other web technology. There are so many ways to avoid this issue and lot of information is present in the internet. It has become very hard to find out simple solution. One of the simple solutions is to disable submit button inside HTML and JavaScript instead on server side. In this blog we explain process of disabling single and multiple buttons using HTML and JavaScript itself.

Disable submit button using JavaScript

Using JavaScript it is very easy to disable a submit button after click, code for this is given 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 submit button once clicked. In this “this” keyword represent current element similar to Java this keyword, We can also use document.getElementById(‘id’) but  this is short and clear.

Some browser has an issue to submit data from disabled button. So, it’s better to call form.submit() from onclick itself to submit form data, which makes your code to onclick=”this.disabled=true; this.form.submit(). In Internet Explorer a disabled submit button doesn’t submit form data to server. We can also change value or text of submit button from submit to “Submitting….” to indicate user that submit is in progress. The modified 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 submission. Once you are comfortable with simple way of disabling submit button you may go and explore multiple ways to prevent multiple form submissions or disable submit button. If you are beginner to JavaScript or HTML than it takes some time to get hold of these tricks. If you are using the browser Internet Explorer and not calling this.form.submit() then only button will be disabled but form will not be submitted so always call this.form.submit().

 

Multiple submit button in one screen

There are cases when you have multiple HTML button in one screen like “Accept” or “Decline”, “Yes or “No” 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 below example, if you have two buttons with name accept and decline, we are disabling both when any of the buttons 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 is useful if you have more than two buttons and its best to write JavaScript function to disable all submit button on that group.

To prevent multiple form submissions we can do this both on client side and server side. It is better to do this on client side using JavaScript because we can avoid server round trip.

There are no comments yet, but you can be the first



Comments are closed.

Copyright © 2013 Sowra Info Solutions. All rights reserved.