If you’re using jQuery to AJAX post a form then you’re already more than familiar with the caveats of using jQuery to POST a forms contents. One thing I often see overlooked is the disabling of the form while the content is being submitted, there is nothing worse than receiving duplicate form submissions and knowing the fix was simple. Or worse yet, I’ve seen instances where a form has been used to attack a site by constantly submitting it quickly.
Disable EVERYTHING
This is an easy solution to implement and in my opinion, the best compared to other methods I have seen. When the form is submitted provided it passes validation (you do validate your forms client-side, right?) you simply disable the submit button by setting its disabled attribute to true like so: $(“#yourbutton”).prop(“disabled”, true) – now for as long as that button is disabled, it won’t trigger a submit event on your form.
I then go one step further and remove the “action” attribute from the form, storing its value in a variable first, in-case I need to add it back. That way if someone enables the button via the browser Web Inspector, the action attribute is gone and therefore the form can’t be submitted. If the request fails, you can add the “action” attribute back to the form (if needed).
