What's a good way to disable double form submitting?

Posted on 2007-11-20
Last Modified: 2008-02-01
I've read many ways to do this, such as disabling buttons, using a unique guid/token, comparing duplicate form values, or doing something like:

<script type="text/javascript">

var form_submitted = false;

function submit_form ( )
  if ( form_submitted )
    alert ( "Your form has already been submitted. Please wait..." );
    return false;
    form_submitted = true;
    return true;

// -->

So what is the best way to stop double submitting and doing it well for every kind of user?
Question by:bemara57
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2

Expert Comment

ID: 20325249
is that you using a button(not submit button)/ a link/ image to submit your form?

if yes, please do as follow:

// in your javascript:
<script language="javascript">
function submit_form ( )
return false;
// return the false from the function called by the onclick,
// to suspend the onclick event of the button(not submit button)/a link/image
// the form will post only once
//in your HTML
onclick="return submit_form();"

Open in new window


Expert Comment

ID: 20326535
@blue_hunter: are you sure that the form submit only once? each time user click the object again it will call submit again and the form then re-submit.
@bemara57: I think the simplest way is disable submit button, but the best way I think it's the unique token, it will also prevent the spam bot re-submit the form continuous, you also can store the time token created, and compare with the submitted time, then decide the expiration of token, this will prevent user to open the form, go around the submit it (some case you will needs this)

Accepted Solution

blue_hunter earned 250 total points
ID: 20326851
using a unique guild/token solve the problem of the case below

case 1:
pageA -> submit data -> page B(save/insert data)
*if you refresh the page B, means data will save into the DB once again, in this case, token/ guide(provided by the language) can solve the problem

case 2:
in page A (click on the "button"/ trigger any event which submit the form) -> submit data -> page B
* in this case, page A you click only once on the button/link/image, but then when come to page B, you go check at your DB, it actually inserted twice. This is due to the button/link/image's event problem (if not mistaken, this happen only to IE)

when come to case to, my solution will cater the problem.

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 20327587
The thing is sometimes you don't have the luxury to check the backend storage to compare it to the frontend Javascript values. Not only will the round trips to the server make things slow, but the difference in technology between two systems can be vastly different.

Onclicks can be annoying to depend on with forms because pressing enter on your keyboard won't trigger an onclick, unless you rig it. I think the best spot is in the <form onsubmit="return submit_form(this);". Then make sure every form has this.

Expert Comment

ID: 20328575
@bemara, it's true that sometime we don't have luxury to check the backend storage to compare it to the front end javascript.

locate onsubmit in the form could be one of the solution to cater the case 2, which i mentioned.
located the onsubmit event in <form> come with one condition, which is the type of the <input> you used to submit the form, must be a "submit" type, instead of a "button".
if it's a button with onclick, then you might face the double insert data row in db, if without return false to the onclick event itself.

you could capture the onKeypress event in the form, to trigger the submit (if you really want to do it).

above is just the case to cater for the client side prevention.

As for the server side, as i know, java's strut got somethings call "token", which the example of it, you can get from the link below

the concept is, when load the HTML form, generate a token of the form in your JAVA  first, after submit, check whether it's a valid token. re-refresh of the "pageB" (the accepting posted data page, which will cause double insert into the db as well) would no cause another insert into the DB.

the conclusion, i may give is, do as much prevention as needed by the application.
client or server. both case i mentioned, will cause the double submit of the form, hence double insert of data into DB


Assisted Solution

KhoiNqq earned 250 total points
ID: 20333013
@blue_hunter: in the case 1 you provide above, you can using the method "redirect after POST", the meaning is after processing any form, redirect user to the next page, not render the result page itself:
pageA(the form) -> submit -> controllerPage(process the form) -> redirect to -> pageB (query the data from DB and render page)

With this method, you can prevent double submit due to user refresh pageB.

IMO, "Redirect after POST" + "Token" is the best practice for SERVER SIDE form processing, you can also apply other technique for client side, but should implement the prevention technique for SERVER SIDE first, cause user can DISABLE client side javascript.

Expert Comment

ID: 20333033

redirect after post is one of the solution to solve the server side  prevention. which is case 1. why i didn't mention here, is because it consider a luxury process for some programming language.

so, the decision is depends on the system's need :)

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question