Disable submit button until Ajax Completes

Question

I'm trying to disable a submit button until an ajax function is completed.

Right now, I have only been able to figure out how to disable the button for a specified time when the user is typing.

How can I disable the submit button until the ajax data loads? Thank you.

<script>

    $('#comment_comment').keyup(function() {
      $("#new_comment_button").attr("disabled", true);
      setTimeout(function() { $("#new_comment_button").removeAttr("disabled"); }, 2000);
    });

    $('#comment_comment').preview({ key:'my key', 
      selector : {type:'rich'},
      preview : {
        submit : function(e, data){
          $.ajax({
            dataType: 'script',
            url: this.form.attr('action'),
            type: 'POST',
            data: data
          });
        },
      },
      autoplay : 0,
      maxwidth : 350,
      display : {display : 'rich'}
    });

</script>

score 1 · Answer 1 · edited May 23 '17 at 12:15

Disable the button when starts the AJAX with simple JS and enable it when the AJAX request finishes.

It would be something like this

$.ajax({...
   success: function(){
     submitButton.enable(); // Pseudo-code
   },
   ...
 });

You can do several things with the AJAX request. See this post for more information

EDIT: If you want to prevent the double submit request, there is a way to do it but I can't remember :/ and I didn't found it on google. This is a way to do it, but I don't like it

Disable submit button until Ajax Completes

1 Answers1