Disabling button on ajax submit

Question

I have this button that I want to disable when my ajax is running, and then being enabled again once it's done.

My HTML:

<form name="send" class="stacked form-send-disable" id="form">
            <label for="senderID">Your phone number here (senderID)</label>
            <input type="tel" name="senderID" id="senderID" autofocus="on"   class="input-1-2" placeholder="Your number" maxlength="9">
            <label class="error" id="senderID_error" for="senderID">Please enter your own number here.</label>

            <label for="recipient" id="recipient_label">Your recipient(s)</label>
            <input type="text" name="recipient" id="recipient" class="input-1" maxlength="50" placeholder="e.g 748930493 - add multiple numbers by using a comma ' , '.">
            <label class="error" id="recipient_error" for="recipient">You need to enter at least one number here.</label>  

            <label for="message">Write your message</label>
            <textarea type="text" name="message" class="input-1" placeholder="(Write something clever..)" id="message"></textarea>
            <label class="error" for="message" id="message_error">You can't send empty messages.</label>  
            <input type="submit" name="submit" class="button btn btn-green block disabled-btn" id="submit_btn" value="Send the message(s)">         
</form>

ajax:

<---- Some form validation going on up here ------>

var dataString = 'recipient=' + recipient + '&message=' + message + '&senderID=' + senderID;  
    //alert (dataString);return false;  

    $.ajax({
      type: "POST",
      url: "/index.php/sms/sender/",
      data: dataString,   
      success: function() {  
        $('#send-message').append("<div id='feedback'></div>");  
        $('#feedback').html("<p><i class='fa fa-check fa-2x'></i> Your message has been succesfully sent!</p>")  
        .append("")  
        .hide()  
        .fadeIn()
        .delay(4000)
        .fadeOut();  
        $.ajax({  
          type: "POST",
          url: "/index.php/pipit/message_sent",
          data: dataString, 
          });
      }


    });  
    return false;

  });  

I tried to do the following in my document:

Jquery:

$('#form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});

But nothing happens. I guess I have to somehow call this within the ajax, so that it applies to the button that way?

Thanks in advance.

UPDATE

$(':submit', this).prop('disabled', true); 
    $.ajax({
      type: "POST",
      url: "/index.php/sms/sender/",
      data: dataString,   
      success: function() {  
        $('#send-message').append("<div id='feedback'></div>");  
        $('#feedback').html("<p><i class='fa fa-check fa-2x'></i> Your message has been succesfully sent!</p>")  
        .append("")  
        .hide()  
        .fadeIn()
        .delay(4000)
        .fadeOut();  
        $.ajax({  
          type: "POST",
          url: "/index.php/pipit/message_sent",
          data: dataString, 
          }).always(function(){$(':submit', this).prop('disabled', false);});;
      }

I updated with the above code (big thanks to A.Wolff), and my ajax request still works, however there is no change on the button, which i assume is because of lack of css for this particular state of the button, how do I go about this?

Thanks to the other replies, i will try them out.

Answer 1

You could use:

//using allias for nested ajax:
var _self = this;
$(':submit', _self ).prop('disabled', true);
//your nested ajax request
$.ajax(...).always(function(){$(':submit', _self ).prop('disabled', false);});

Answer 2

You can set the button as disabled before the AJAX runs and re-enable it once the ajax has completed.

$.ajax({
    beforeSend: function() {
         $("input[type=submit]", $("#form")).attr("disabled", "disabled");
    },

    ...

    complete: function () {
        $("input[type=submit]", $("#form")).removeAttr("disabled");
    }
});

Edit: I notice there is a class on the button disabled-btn if this needs to be added and removed as the button is disabled/re-enabled then you can do this by chaining the following to the above:

.addClass("disabled-btn");

...

.removeClass("disabled-btn");

I would assume if this is the case then the class should be removed from the actual element to start with.

Answer 3

I made a working demo that disables the form whilst the ajax request is happening. I hope its of some use. See: http://jsfiddle.net/EWkpR/

$("#form").on("submit", function(event) {
    //stop the default submission:
        event.preventDefault();
    //create an alias to this form
        $form = $(this);
    //create the feedback element
        $feedback = $("<div id='feedback'>Please wait...</div>");
        $form.before($feedback);
    //validate the form:
        var valid = true;
        /*[some form validation here]*/
    //use jQuery's serialize to build the form submission params:
        var dataString = $(this).serialize();
        console.log(dataString);
    //check if invalid
        if(!valid){
            //not valid. tell the user
            $feedback.html("<p>Some message about invalid fields!</p>");
        } else {
            //valid.
            $form.disable();//disable the form;
            //do the ajax
            $.ajax({
                type: "POST",
                url: "/index.php/sms/sender/",
                data: dataString,   
                success: function() {  
                    $feedback  
                        .html("<p><i class='fa fa-check fa-2x'></i> Your message has been succesfully sent!</p>") 
                        .fadeIn()
                        .delay(4000)
                        .fadeOut("normal",
                        function(){$form.enable();}//callback to fade the form back in
                    );  
                    $.ajax({  
                        type: "POST",
                        url: "/index.php/pipit/message_sent",
                        data: dataString, 
                    });
                }
            });
        }
    return false; 
});

//plugin function to disable form fields
$.fn.disable = function(){
    this.fadeTo(1,.5);
    this.find("input").attr("disabled", true); 
  };
//plugin function to enable form fields    
    $.fn.enable = function(){
    this.fadeTo(1,1);
    this.find("input").removeAttr("disabled"); 
  };