Отключить кнопку отправки во время обработки формы

Question

У меня есть следующий код, который хорошо работает:

$(function() { 
     $("input,textarea").jqBootstrapValidation({ 
      preventSubmit: true, 
      submitError: function($form, event, errors) { 
       // additional error messages or events 
      }, 
      submitSuccess: function($form, event) { 
       event.preventDefault(); // prevent default submit behaviour 
       // get values from FORM 
       var name = $("input#name").val(); 
       var email = $("input#email").val(); 
       var phone = $("input#phone").val(); 
       var message = $("textarea#message").val(); 
       var firstName = name; // For Success/Failure Message 
       // Check for white space in name for Success/Fail message 
       if (firstName.indexOf(' ') >= 0) { 
        firstName = name.split(' ').slice(0, -1).join(' '); 
       } 
       $.ajax({ 
         url: "././mail/contact_me.php", 
         type: "POST", 
         data: { 
         name: name, 
         phone: phone, 
         email: email, 
         message: message 
         }, 
         cache: false, 
         success: function() { 
         // Success message 
         $('#success').html("<div class='alert alert-success'>"); 
         $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;").append("</button>"); 
         $('#success > .alert-success').append("<strong>Su mensaje fue enviado. </strong>"); 
         $('#success > .alert-success').append('</div>'); 
         //clear all fields 
         $('#contactForm').trigger("reset"); 
         ga('send', 'event', { 
          eventCategory: 'Contactos', 
          eventAction: 'Envio contacto', 
          eventLabel: 'Español' 
         }); 
         }, 

Я хочу, чтобы в то время как кнопка отправки формы используется для запуска, так что вы не можете отправить его обратно при обработке , как я оставить кнопку отправки отключенной во время отправки? Код кнопки:

<button class="btn btn-xl2" type="submit">Enviar </button> 

Спасибо!

Answer 1

Отключить его:

submitSuccess: function($form, event) { 
    $('#contactForm').find('.btn.btn-xl2').prop('disabled', true); 
    /*...*/ 
} 

И добавить complete обратного вызова метода АЯКС:

complete: function(){ 
    $('#contactForm').find('.btn.btn-xl2').prop('disabled', false); 
} 

Answer 2

Добавить это до $ .ajax ({

$('.btn-xl2').attr('disabled','disabled')

Добавить это функция успеха

$('.btn-xl2').removeAttr('disabled')

Answer 3

Для меня это было бы просто чего прийти сделать некоторые HTML/CSS манипуляции.

Например, вы можете изменить внешний вид этой кнопки и удалить параметр type="submit" за время обработки запроса (так что в этом случае вы должны удалить его, когда скрипт начнет работу и вернет его, когда он закончит).

Конечно, это не лучший способ, но я считаю самым легким.