title: Disabling button on ajax submit
body: <p>I have this button that I want to disable when my ajax is running, and then being enabled again once it's done. </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;form name="send" class="stacked form-send-disable" id="form"&gt;
              &lt;label for="senderID"&gt;Your phone number here (senderID)&lt;/label&gt;
              &lt;input type="tel" name="senderID" id="senderID" autofocus="on"   class="input-1-2" placeholder="Your number" maxlength="9"&gt;
              &lt;label class="error" id="senderID_error" for="senderID"&gt;Please enter your own number here.&lt;/label&gt;
  
              &lt;label for="recipient" id="recipient_label"&gt;Your recipient(s)&lt;/label&gt;
              &lt;input type="text" name="recipient" id="recipient" class="input-1" maxlength="50" placeholder="e.g 748930493 - add multiple numbers by using a comma ' , '."&gt;
              &lt;label class="error" id="recipient_error" for="recipient"&gt;You need to enter at least one number here.&lt;/label&gt;  
  
              &lt;label for="message"&gt;Write your message&lt;/label&gt;
              &lt;textarea type="text" name="message" class="input-1" placeholder="(Write something clever..)" id="message"&gt;&lt;/textarea&gt;
              &lt;label class="error" for="message" id="message_error"&gt;You can't send empty messages.&lt;/label&gt;  
              &lt;input type="submit" name="submit" class="button btn btn-green block disabled-btn" id="submit_btn" value="Send the message(s)"&gt;         
  &lt;/form&gt;
  </code></pre>
  
  <p>ajax:</p>
  
  <pre><code>&lt;---- Some form validation going on up here ------&gt;
  
  var dataString = 'recipient=' + recipient + '&amp;message=' + message + '&amp;senderID=' + senderID;  
      //alert (dataString);return false;  
  
      $.ajax({
        type: "POST",
        url: "/index.php/sms/sender/",
        data: dataString,   
        success: function() {  
          $('#send-message').append("&lt;div id='feedback'&gt;&lt;/div&gt;");  
          $('#feedback').html("&lt;p&gt;&lt;i class='fa fa-check fa-2x'&gt;&lt;/i&gt; Your message has been succesfully sent!&lt;/p&gt;")  
          .append("")  
          .hide()  
          .fadeIn()
          .delay(4000)
          .fadeOut();  
          $.ajax({  
            type: "POST",
            url: "/index.php/pipit/message_sent",
            data: dataString, 
            });
        }
  
  
      });  
      return false;
  
    });  
  </code></pre>
  
  <p>I tried to do the following in my document:</p>
  
  <p>Jquery:</p>
  
  <pre><code>$('#form').submit(function(){
  $('input[type=submit]', this).attr('disabled', 'disabled');
  });
  </code></pre>
  
  <p>But nothing happens. I guess I have to somehow call this within the ajax, so that it applies to the button that way? </p>
  
  <p>Thanks in advance.</p>
  
  <p>UPDATE</p>
  
  <pre><code>$(':submit', this).prop('disabled', true); 
      $.ajax({
        type: "POST",
        url: "/index.php/sms/sender/",
        data: dataString,   
        success: function() {  
          $('#send-message').append("&lt;div id='feedback'&gt;&lt;/div&gt;");  
          $('#feedback').html("&lt;p&gt;&lt;i class='fa fa-check fa-2x'&gt;&lt;/i&gt; Your message has been succesfully sent!&lt;/p&gt;")  
          .append("")  
          .hide()  
          .fadeIn()
          .delay(4000)
          .fadeOut();  
          $.ajax({  
            type: "POST",
            url: "/index.php/pipit/message_sent",
            data: dataString, 
            }).always(function(){$(':submit', this).prop('disabled', false);});;
        }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks to the other replies, i will try them out.</p>