Solved

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

Posted on 2007-11-20
7
1,004 Views
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;
  }
  else
  {
    form_submitted = true;
    return true;
  }
}

// -->
</script>

So what is the best way to stop double submitting and doing it well for every kind of user?
0
Comment
Question by:bemara57
  • 4
  • 2
7 Comments
 
LVL 9

Expert Comment

by:blue_hunter
Comment Utility
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 ( )

{

document.forms[0].submit();
 

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

}
 

</script>
 

//in your HTML

onclick="return submit_form();"

Open in new window

0
 
LVL 3

Expert Comment

by:KhoiNqq
Comment Utility
@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)
0
 
LVL 9

Accepted Solution

by:
blue_hunter earned 250 total points
Comment Utility
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.

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 

Author Comment

by:bemara57
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:blue_hunter
Comment Utility
@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).
http://www.thescripts.com/forum/thread89237.html


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
http://saloon.javaranch.com/cgi-bin/ubb/ultimatebb.cgi?ubb=get_topic&f=58&t=007484

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


0
 
LVL 3

Assisted Solution

by:KhoiNqq
KhoiNqq earned 250 total points
Comment Utility
@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.
0
 
LVL 9

Expert Comment

by:blue_hunter
Comment Utility
@KhoiNqq,

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 :)
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now