Preventing the "double submit" problem in Ajax form

Question

I have website contact form that, when submitted, sometimes takes a few second to send.

The user, usually because they're impatient, clicks again. This results in the form being sent multiple times to the host.

To prevent this, I've tried implementing something along these lines, but thinking there's something cleaner and better:

$.fn.click1 = function(fn) {  
  $(this).data('clicked', false);  
  $(this).click(function(o) {  
    if ($(this).data('clicked')) return false;  
    $(this).data('clicked', true);  
    fn(o);  
    return false;  
  });  
};  

$(function() {

  // get the form
  var form = $('#modal-contact-form');

  // get the messages element
  var formMessages = $('#modal-contact-form-responses');

  // set up event listener for contact form
  $(form).submit(function(e) {
    // disable html submit button
    e.preventDefault();

    // serialize form data
    var formData = $(form).serialize();

    // submit form using AJAX
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
      })
      .done(function(response) {
        // make sure formMessages element has 'success' class
        $(formMessages).removeClass('error');
        $(formMessages).addClass('success');

        // set message text
        $(formMessages).text('Your message has been sent. Thank you!');

        // clear form
        $('input, textarea').val('');
        $("#modal-contact-form-message").trigger('change');
      })
      .fail(function(data) {
        // make sure formMessages element has 'error' class
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');

        // set the message text
        $(formMessages).text('Input error. Please review and re-submit.');
      });

  });

});

// text area character counter
// disables submit button when < 0
(function($) {

  $.fn.charCount = function(submit, options) {

    this.submit = submit;

    // default configuration properties
    var defaults = {
      allowed: 1250,
      warning: 150,
      css: 'counter',
      counterElement: 'span',
      cssWarning: 'warning',
      cssExceeded: 'exceeded',
      counterText: ''
    };

    var options = $.extend(defaults, options);

    function calculate(obj, submit) {

      submit.attr("disabled", "disabled");

      var count = $(obj).val().length;
      var available = options.allowed - count;
      if (available <= options.warning && available >= 0) {
        $(obj).next().addClass(options.cssWarning);
      } else {
        $(obj).next().removeClass(options.cssWarning);
      }
      if (available < 0) {
        $(obj).next().addClass(options.cssExceeded);
      } else {
        $(obj).next().removeClass(options.cssExceeded);
        submit.removeAttr("disabled");
      }

      $(obj).next().html(options.counterText + available);
    };

    this.each(function() {
      $(this).after('<' + options.counterElement + ' class="' + options.css + '">' + options.counterText + '</' + options.counterElement + '>');

      calculate(this, submit);

      $(this).keyup(function() {
        calculate(this, submit)
      });
      $(this).change(function() {
        calculate(this, submit)
      });
    });

  };

})(jQuery);

$(document).ready(function() {
  $("#modal-contact-form-message").charCount($("#modal-contact-form-submit"));
});

<form action="process_contact_form/" method="post" id="modal-contact-form">

  <div>
    <label for="modal-contact-form-name">Name</label>
    <input type="text" name="name_cform" id="modal-contact-form-name">
  </div>

  <div>
    <label for="modal-contact-form-email">E-mail</label>
    <input type="email" name="email_cform" id="modal-contact-form-email">
  </div>

  <div id="subject-line">
    <label for="modal-contact-form-subject">Subject</label>
    <input type="text" name="subject_cform" id="modal-contact-form-subject">
  </div>

  <div id="counter-container">
    <label for="modal-contact-form-message">Message</label>
    <textarea name="message_cform" id="modal-contact-form-message"></textarea>
  </div>

  <input type="hidden" name="formtarget_cform" value="modal" id="modal-contact-form-hidden">

  <button type="submit" name="submit_cform" id="modal-contact-form-submit">Send Message</button>

  <p id="modal-contact-form-responses"></p>

</form>

Answer 1

First, you can disable the submit button when the form is submitted. This prevent any unnecessary further form submission. Then remove the disabled attribute once the ajax request is completed via jqXHR.always() method.

You can also change the button's text to Sending Message... for the user to know that the form is submitting.

Kindly change this part <!-- AJAX form messaging --> to this

$(function() {

    // get the form
    var form = $('#modal-contact-form');

    // get the messages element
    var formMessages = $('#modal-contact-form-responses');

    // get the submit button
    var submitButton = $("#modal-contact-form-submit");

    // set up event listener for contact form
    $(form).submit(function(e) {
        // disable html submit button
        e.preventDefault();

        // serialize form data
        var formData = $(form).serialize();

        // disable submit button to prevent unnecessary submission
        submitButton.attr('disabled', 'disabled');
        submitButton.text('Sending Message...'); // this help the user to know that the form is sending

        // submit form using AJAX
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })
        .done(function(response) {
            // make sure formMessages element has 'success' class
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // set message text
            $(formMessages).text('Your message has been sent. Thank you!');

            // clear form
            $('input, textarea').val('');
            $("#modal-contact-form-message").trigger('change');
        })
        .fail(function(data) {
            // make sure formMessages element has 'error' class
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // set the message text
            $(formMessages).text('Input error. Please review and re-submit.');
        }).always(function(data) { // this will always fire even if the request fails
            submitButton.removeAttr('disabled');
            submitButton.text('Send Message');
        });

    });
});

Answer 2

you can do it with a flag like : https://stackoverflow.com/a/3188524/11143288 or you can run a loading overlay when submit starts

$('form').submit(function () {
    $("#overlay").fadeIn(30);// Call (Show) loading box by default.
    if (Page_ClientValidate() != null) //Check if there is a validation on page.
        {
        if (!Page_ClientValidate()) {//If Validation returns false then hide the loading box
            $("#overlay").hide();
        } 
    }
});