Monday, November 25, 2013

How to disable submit button in HTML JavaScript to prevent multiple form submission

Avoiding multiple submission of HTML form or POST data is common requirement in Java web application. Thankfully, You can prevent multiple submission by disabling submit button in HTML and JavaScript itself, rather than handling it on server side. This is very common requirement while developing web application using Servlet and JSP or any other web technology. At same time there are lot of information and noise available in web and its very hard to find simple approach to disable submit button. When I search for simple way to disable submit button in HTML and JavaScript, I was overwhelmed by responses on forums and various online community. Those are good for intermediate HTML and JavaScript developer but a beginner might just get overwhelmed by amount of information presented and rather confused to use which 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 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 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() fromonclick itself to submit form data, which makes your code toonclick="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 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. As I said if you are beginner to JavaScript or HTML than it takes some time to get hold of these tricks. If you are using 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().

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 usinSpring MVCWebUtils 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 iHTTP  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 button in 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 JavaScript function to disable all submit button on that group.

That’s all on How to disable submit button in HTML and prevent multiple form submissions on Server. Anyway there are multiple ways to accomplish this, both on client side and server side. I prefer to do this on client side using JavaScript to avoid server round trip. Let us know how do you prevent multiple form submission in your web application.
JavaScript Unit TestingRelated Book - JavaScript Unit Testing
Given important of Unit testing in software development, and with growing importance of JavaScript in web development, I always feel need of good book on unit testing my JavaScript code. JavaScript Unit testing is a good read to fill that gap.
Other Java web tutorials and Interview questions you may like

4 comments:

oakleyses said...

louis vuitton handbags, oakley sunglasses, louboutin, longchamp outlet, nike shoes, louis vuitton outlet stores, chanel handbags, burberry outlet, prada outlet, jordan shoes, tiffany and co, michael kors outlet, tory burch outlet, louis vuitton outlet, longchamp handbags, nike free, true religion jeans, michael kors outlet, kate spade outlet, polo ralph lauren outlet, tiffany and co, prada handbags, polo ralph lauren outlet, michael kors outlet, michael kors outlet, longchamp handbags, oakley sunglasses, ray ban sunglasses, kate spade handbags, burberry outlet, louis vuitton outlet, louboutin outlet, louboutin, coach factory outlet, air max, air max, coach outlet, gucci outlet, christian louboutin shoes, michael kors outlet, coach purses, ray ban sunglasses, michael kors outlet, louis vuitton, coach outlet store online, true religion jeans, oakley sunglasses cheap

oakleyses said...

ralph lauren, lululemon, air max, hollister, north face, nike air max, polo lacoste, vanessa bruno, timberland, vans pas cher, louboutin, louis vuitton, oakley pas cher, air max pas cher, nike roshe run, air max, true religion outlet, barbour, sac longchamp, air force, hollister, sac louis vuitton, nike free, polo ralph lauren, nike trainers, louis vuitton uk, nike roshe, sac hermes, longchamp, michael kors, sac burberry, sac guess, mulberry, new balance pas cher, converse pas cher, sac louis vuitton, hogan outlet, nike tn, north face, true religion outlet, ray ban pas cher, michael kors, air jordan, nike blazer, nike free pas cher, michael kors pas cher, abercrombie and fitch, ray ban sunglasses

oakleyses said...

mac cosmetics, mont blanc, marc jacobs, canada goose outlet, nike huarache, vans shoes, soccer jerseys, hollister, giuseppe zanotti, beats by dre, abercrombie and fitch, longchamp, insanity workout, celine handbags, bottega veneta, ghd, nfl jerseys, north face outlet, chi flat iron, ugg boots, birkin bag, ugg australia, canada goose, herve leger, ugg pas cher, rolex watches, valentino shoes, canada goose uk, canada goose, ferragamo shoes, canada goose, ugg boots, uggs outlet, north face jackets, soccer shoes, asics running shoes, new balance shoes, p90x, lululemon outlet, canada goose jackets, mcm handbags, instyler, babyliss pro, ugg, wedding dresses, jimmy choo outlet, reebok outlet, nike roshe run

oakleyses said...

parajumpers, karen millen, air max, converse, pandora charms, moncler, louboutin, moncler, links of london, lancel, juicy couture outlet, oakley, hollister, pandora charms, supra shoes, thomas sabo, canada goose, gucci, wedding dresses, timberland boots, swarovski crystal, air max, coach outlet store online, moncler, ray ban, canada goose, moncler, ugg, louis vuitton, swarovski, hollister, montre homme, moncler, hollister clothing store, ralph lauren, rolex watches, moncler outlet, moncler, iphone 6 cases, baseball bats, juicy couture outlet, toms shoes, vans, pandora jewelry, ugg, converse shoes