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() 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 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
There is a caveat while using JavaScript to submit form, it doesn'tinclude 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 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.
Related Book - JavaScript Unit TestingGiven 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
Source:http://javarevisited.blogspot.com/2013/02/disable-submit-button-in-html-javascript-avoid-multiple-form-submission.html
Tidak ada komentar:
Posting Komentar