I'm looking for a generic way to prevent multiple form submissions. I found this approach which looks promising. Whereas I do not want to include this snippet in all of my views. Its probably easier to do this with a request processor or a middleware.
Any best practice recommendations?
Client side, start with JavaScript. You can never trust the client, but its a start.
i.e.
onclick="this.disabled=true,this.form.submit();"
Server side you 'could' insert something into a database i.e. a checksum. If its a records you are insert into a database use model.objects.get_or_create() to force the uniqueness on database level you should use unique_together.
Lastly: HTTPRedirect is best, The the method I use when a user processes a payment is to just issue a HTTPRedirect() to the thank you/conformation page. This way refreshing the form won't resubmit and if they go back and try to submit the form again (without refreshing the form) the Django Cross Site Request Forgery (CSRF) will fail, perfect!
I also try to find a good way to prevent double records generation when a user dbl-click on a submit button. It's not about the PRG issue that is easily fixed by redirection.
So, regards on this basic concern, the solution with HTTPRedirect on server-side doesn't help.
On client-side, I found two problems when I disable the button before submit:
form.submit() will be interupted by browser if the form is invalid => submit button is still disabled=true.disabled=true.So here is my workaround for the first client-side problem (HTML5 validation):
isFormHtml5Valid(form) {
for(var el of form.querySelectorAll('input,textarea,select')){
if(!el.checkValidity())
return false;
}
return true;
}
mySubmitButton.onclick = function() {
if(this.form && isFormHtml5Valid(this.form))
this.disabled=true;
this.form.submit();
}
I try to find a client-side workaround for the second client-side problem (browser cache the DOM) but nothing worked (onbeforeunload, ...). So the workaround I currently use for "browser cache" issue is add a @never_cache decoration on the top of concerned views (from server-side, indicate to client-side to not caching). Please let me know if you have a better workaround.
Last but not least, I would really appreciate to fix this issue on server side. The CSRF solution seems not suitable since a CSRF token is generated by session (not for each form). So here is the status of my work and my question:
Let me know if you have a good solution for that.
Edit 1: May be a small part of the answer: Synchronizer (or Déjà vu) Token
But I didn't find any implemantation of that in Django.
Use HttpResponseRedirect
create a new view(lets say thank_you) for successful message to display after form submission and return a template.
After successful form submission do return HttpResponseRedirect("/thank-you/") to the new thank-you view
from django.http import HttpResponseRedirect
def thank_you(request, template_name='thank-you.html'):
return render_to_response(template_name,locals(),context_instance=RequestContext(request))
and in urls.py
url(r'^thank-you/$','thank_you', name="thank_you")
Multiple form submission happens because when page refreshes that same url hits, which call that same view again and again and hence multiple entries saved in database. To prevent this, we are required to redirect the response to the new url/view, so that next time page refreshes it will hit that new url/view.
As for #2, it's best to do that in the onsubmit handler and not the onclick for the submit button. This will handle cases such as multiple submit buttons or if there's any HTML5 client-side form validation. In jQuery it'd look something like:
$('#edit_form').submit( function(event) {
// disable to avoid double submission
$('#submit_button').attr('disabled', true);
});
However, one issue this doesn't account for is if the user cancels the submit part way. For example, if you click "submit" and then immediately hit "Esc", the browser will stop the submission but "submit" button will already be disabled.
Also, it's possible to have a form that is submitted by hitting "enter" and this solution wouldn't prevent that form from submitting twice.
I have been longing for a proper analysis and solution for this issue for over a decade. After searching a bit around online, I decided to try a method that should be able to prevent duplicate submissions by hashing the POST in a Django class-based view (possible to translate this to a function-based view, too).
class MyCreateView(CreateView):
def post(self, request, *args, **kwargs):
# Unique key to store session for this view
self.session_form_hash = f"form-submission+{self.__class__.__name__}"
# Unique key for storing the pk when the object is created
self.session_last_saved_pk = session_form_hash + "-pk"
# Calculate hash of the POST data
excluded = {
"csrfmiddlewaretoken",
}
self.post_hash = hash(
tuple(
sorted(
(k, v) for k, v in self.request.POST.items() if k not in excluded
)
)
)
# Previously calculated hash
previous_post_hash = self.request.session.get(self.session_form_hash)
# Form has already been processed!
if self.post_hash == previous_post_hash:
# Fetch the previous object and return a helpful message to the user
self.object = get_object_or_404(
MyModel,
pk=self.request.session[self.session_last_saved_pk]
)
messages.warning(
self.request, "This form was submitted several times. It hans been processed just once."
)
return HttpResponseRedirect(self.get_success_url())
return super().post(request, *args, **kwargs)
def form_valid(self, form):
self.object = form.save()
# Now that the form is valid and saved, we're gonna update our session
self.request.session[self.session_form_hash] = self.post_hash
self.request.session[self.session_last_saved_pk] = self.object.pk
return HttpResponseRedirect(self.get_success_url())
As the OP asks for "best practice", I would have to say: I don't think that it's best practice to use javascript to disable the submit button. That causes all sorts of new issues.
The idea to redirect to a "thank you" page is fine, but this should already be standard practice and doesn't fix issues caused by network problems, double-clicks etc.
You can read more about it on my blog from today 😇️ https://overtag.dk/v2/blog/duplicate-form-submissions-and-how-to-handle-them-in-django/
