• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Prevent Duplicate Form Submissions Using jQuery

General · August 28, 2014

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).

An example

Dwayne

Leave a ReplyCancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • Testing Event Listeners In Jest (Without Using A Library)
  • The Quad Cortex Desktop Editor is Finally Announced
  • How To Paginate An Array In Javascript

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz