• 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 Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz