How to use jQuery to Prevent Multiple Form Submit for Efficient Forms

Often when a jQuery form is submitted, it can accidentally happen more than once. Depending on the server speed or the internet connection, the request to submit the form can go through slowly, which often leads to the user hitting the submit button more than once because they may think it isn't working. When this happens, the form can be submitted multiple times, which isn't a huge deal, but can definitely lead to some clogging up of your inbox.

A really good way to prevent this from happening is to use some simple jQuery code that disables the submit button after it's been submitted. The code to add this functionality to any of your projects is efficient, lightweight, and less than 15 lines.

  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });

When adding it to any of your projects, don't forget to add the specific form class or ID for the form you want to target if you don't want or need this snippet to apply to all the forms on your site.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..