Find out how to prevent multiple form submissions when using spring MVC.
Detailed Video Notes
When building web forms you will need to account for users submitting the form multiple times which could cause unwanted database updates or service request made. Typically users will hit the refresh button, double click a single click button or QAs that machine gun click to try to break something. In this java tutorial we will show a couple of techniques to help prevent duplicate form submission.
Project set up
Creating a project following the spring boot tutorial and spring start initialzer website we will create a project that includes spring-web and velocity as a template engine. We will import the project into eclipse and begin creating the skeleton to our exercise.
Lets create an html5 page that contains a form that will be used to post to a
DuplicateFormSubmission. It contains web assets such as boostrap strictly for style and jquery which will be used later to bind to an event. By using
@ModelAttribute we notify spring to bind the request to a java class named
SubmitForm which fields name and emailAddress correlate to the html input attributes. This will be the base of project so lets run the application and access
Java class form
Once we have accessed the default request mapping and validated the
index.vm is processed it is important before we discuss how spring will handle users action of hitting the refresh button we talk about the the Post / Redirect / Get pattern. When a user makes a successful post instead of returning a web page directly, the POST operation returns a redirection command which will not duplicate form submissions. This way when a user hits the browser refresh button, it will be refresh on the redirection URL and not the post URL.
As you can see the form will post to
/handle and we will set up the code that once the post is successful will redirect to the default view. In the process we will generate a random number setting a flash attribute which is a mechanism to temporary store attributes across requests while using a
RedirectView which is a helper class to perform a redirection. You could also substitute it with the redirect prefix
return "redirect:/"; as well.
So, to put that in words, when a user submits a our sample form it will route to the
handlePost method which will generate a random number. Once it is successful it will send a redirect to the browser which will instruct it to make another request to the
defaultView method returning the form. The random number will be carried across request and pulled from
inputFlashMap which we will place into context for the view to render.
Let's run our example to verify the behavior.
Disabling submit button
#myform on the page we will bind an event handler when the form is submitted by calling the
.submit(). When the form is submitted the button with an id of
#mySubmitButton will be disabled and a CSS class will be added. You should visually see the button grey out where you are unable to click it again. Let's run this example and set a break point to see the effects of our code.
Thanks for joining in today's level up, have a great day!