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

Posted on 2007-11-20
Medium Priority
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
  • 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 1000 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.

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.


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 1000 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

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!

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
Suggested Courses

569 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