How to stop users from spamming the submit button and sending multiple ajax requests?

I have a from with an input which is disabled unless the textbox has text inside, but when a user adds text and smashes the submit button as fast as they can the ajax runs multiple times inserting the same text in the database over and over, this is my submit the form jQuery;

$('#content').on("submit", "#message_reply", function(){

    $.ajax({
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        dataType: 'json',
        data: $(this).serialize(),
        success: function(data){
            if(!data.success){
                $.notify(data.error, "error");
            }else{
                $('#newMessage').prop('disabled', true);
                $('#newMessage').val('');
                $("#content").load("<?php echo Config::get('URL'); ?>messages/message/" + jQuery('input[name="message"]').val(), function(){
                    $('#content').fadeIn('slow');
                });
            }
        }
    });
    return false;
});

Code to check if textbox has text inside:

$(function(){
    $('#newMessage').on("keyup", function(){
        if($(this).val()){
            $('#reply_submit').prop('disabled', false);
        }else{
            $('#reply_submit').prop('disabled', true);
        }
    });
});

and my form:

            <form action="<?php echo config::get('URL'); ?>messages/reply" method="POST" id="message_reply">
                <input type="hidden" name="message" value="<?php echo System::escape($this->message->message_id); ?>">
                <textarea id="newMessage" class="form-control" name="reply" rows="4" placeholder=""></textarea>
                <input style="margin-top: 20px;" type="submit" id="reply_submit" disabled name="submit" value="<?php echo System::translate("Send"); ?>" class="btn btn-success pull-right">
            </form>
            <!-- wysiwyg !-->

As you can see I am trying to disable the text box and empty the value, but that doesn't work in the space of a few milliseconds allowing the same data to be submitted 3 or 4 times

How can I stop this from happening?

Answers


Just disable the button once you click, and enable it back after a timeOut, after the AJAX is successful:

$('#content').on("submit", "#message_reply", function(){
  $this = $("#reply_submit");
  $this.prop("disabled", true);
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    dataType: 'json',
    data: $(this).serialize(),
    success: function(data){
      if(!data.success){
        $.notify(data.error, "error");
      }else{
        $('#newMessage').prop('disabled', true);
        $('#newMessage').val('');
        $("#content").load("<?php echo Config::get('URL'); ?>messages/message/" + jQuery('input[name="message"]').val(), function(){
          $('#content').fadeIn('slow');
        });
      }
    },
    complete: function () {
      setTimeout(function () {
        $this.prop("disabled", false);
      }, 1000);
    }
  });
});

Just disable relevant :submit element of form and renable it on ajax complete callback, e.g:

$('#content').on("submit", "#message_reply", function() {
  var $submit = $(this).find(':submit').prop('disabled', true);
  $.ajax(...).always(function() {
    $submit.prop('disabled', false);
  });
  return false;
});

Need Your Help

How can I generate a flat excel file from a .rdl report?

.net excel reporting-services rdl

I have a .rdl report that formats data as a report. I want to export that data to excel as a flat table with the raw data that was returned based on the params in the report. The default excel ex...

Convert UID string to hex array and base64 string ItemId in EWS from Android

java android hex base64

From this example (Get the organizer's calendar appointment using EWS for Exchange 2010) I can get the ID string from UID. But the problem is I wrote in Android, not C#. So I need the same method to