Double Form Submit Problem

When dealing with forms in web applications it's very possible to run into problems when users double-click the form submit button. Depending on what your application does and what checks you have it place you could end up with duplicate database entries, emails, or some other action could happen multiple times that was only supposed to happen once. In this article we will explain this problem in detail and also provide some common solutions to the problem.

The Problem

Some users double-click everything including the form submit buttons on your website. It is unknown why they do this but here are some common theories:

• They are used to double-clicking files on their computer and so they do it on the web too.
• When they submit the form the first time they do not see an immediate response so they click again.
• They double-click by accident.
• The user knows you have a problem with double submitted forms and they are trying to annoy you.

While the last option is probably not likely, it is possible that malicious users will take advantage of a double-submitting form to cause problems for you. If this happens you could end up wasting hours trying to remove duplicate entries in your database or fixing other related problems.

So when the user double-clicks the form, the form is submitted twice to your form processing page. If you don't have any checks in place to catch this problem then your processing page will do whatever it does two times (or more) instead of just doing it once.

Solutions

There are two ways to tackle the problem. You can implement a solution on the client-side using javascript or you can implement it on the server-side. There are advantages to each method but only one solution will work 100% of the time. It is easiest to come up with a solution on the client-side because you can disable the form submit button as soon as they click it which will stop further submits. The problem with a client-side solution is that users can turn off javascript altogether in their browser and bypass your solution. If you are certain that your users are going to have javascript enabled you should implement the solution in javascript because it's much easier to stop multiple requests from being sent than it is to try to handle multiple requests on the server-side. Here is an example of how to solve the double form submit problem with javascript.

So, in order to fix the problem 100% you must use a server-side solution. This can be quite complicated but the basic problems that need to be addressed are the following:

• How to tell if a request is a duplicate request.
• What to do if it is a duplicate request.
• How to know when to allow the user to submit a request again.

1. So first, how do you tell if a request is a duplicate request and ignore it? In order to do this you will need to use cookies or some sort of session mechanism. When the first request is submitted you can put a variable in the user's session or cookie that says that a form they submitted is already processing. Each time the form is submitted after that you can check that variable to see if it exists and if it does you know that you have a duplicate request.

2. Now that you know you have a duplicate request you must determine where the user should be taken. If you just throw an error to the page and say "Sorry, this was a duplicate request" then the user will not know if the first request succeded or failed. Thus, it becomes necessary to not only keep track of requests in progress but to watch the status of those requests as well. To do this it is wise to create another session or cookie variable that starts out with a 'pending' status and switches to 'success' or 'failed' once the original request is finished. Now, when you find a duplicate request all you need to do is check the status of the first request every second or so to see if it changed. When it changes you now know to send the user to the success page if the form submit was successful or else send them to the error page if it failed.

3. When another form submit request comes through for the same form, all you need to do is check to see if there is a 'pending' status. If there is, then you need to have the user wait until it's done. Otherwise, clear out the 'success' or 'fail' value and the user should be able to submit the form again and it will be recognized as a new request.

Conclusion

The multiple form submit problem is mostly seen on forms that take a long time to process because the user thinks that nothing is happening so they try and submit the form again. Using the methods and ideas on this page you should be able to prevent the problem from happening on your site.