Отключить кнопку on sumbit и повторно включить после отправки

Question

У меня есть сценарий, ниже которого данные передаются на сервер через ajax и отлично работает. Я хочу добиться того, чтобы отключить кнопку при отправке и снова включить ее после отправки.

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 

     }); 
    }); 
}); 

HTML

<form name="form1" method="post" action="" class="comment"> 
    <p> 
    <label for="comment"></label> 
    <textarea name="comment" id="comment"></textarea> 
    </p> 
    <p> 
    <input type="submit" name="button" id="button" value="Submit Comment"> 
    </p> 
</form> 

Answer 1

Просто обновите ваш код с последующим добавлением двух линий, и она будет работать для вас, как хотелось бы.

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $("#button").prop('disabled',true); // disable 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
    $('#new_entry').html(msg); 

      $('.textbox').val(""); 
      $("#button").prop('disabled',false); // enable 



     }); 
    }); 
}); 

Для справки - http://api.jquery.com/prop/

Answer 2

Вы можете использовать prop() как

$(document).ready(function() { 
    $('.comment').on('submit', function(event) { 
     $('#button').prop('disabled', true); 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#button').prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
}); 

Answer 3

Вы пытались установить инвалида Аттрибут на старте функции (this.attr('disabled','disabled')) и повторно включить на успех (this.removeAttr('disabled')) ?

Answer 4

Отключить при щелчке события ввода. Затем включите функцию успеха jQuery Ajax.

Answer 5

Я хотел бы попробовать следующее:

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     document.getElementById("button").disabled = true; 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
     type: "POST", 
     url: "user_comment.php", 
     data: data 
     }).success(function(msg) { 
     document.getElementById("button").disabled = false; 
    $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
}); 

Answer 6

Try ниже код. Пользователь Ajax beforeSend event для этого

$(document).ready(function() { 
    $('.comment').on('submit', function (event) { 
     event.preventDefault(); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
      beforeSend: function() { 
       $('#button').attr('disabled', true); 
      }, 
      success: function() { 
       $('#button').attr('disabled', false); 
       $('#new_entry').html(msg); 
       $('.textbox').val(""); 
      }); 
     }); 
    }); 

Answer 7

Если вы делаете это, чтобы предотвратить двойные сообщения, кнопка отключения не является правильным, что нужно сделать. Вы всегда должны делать в вашем коде, а не только в DOM:

$(document).ready(function(){ 
    $('.comment').on('submit',function(event){ 
     event.preventDefault(); 
     if ($('.comment').data('isWaiting')) { 
      return; 
     } 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
      $('.comment').data('isWaiting', false); 
     }); 
     $('.comment').data('isWaiting', true); 
    }); 
}); 

Answer 8

$(document).ready(function() { 
    $('.comment').on('submit', function(event) {    
     event.preventDefault(); 
     var button = $('#button'); 
     button.prop('disabled', true); 
     data = $(this).serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "user_comment.php", 
      data: data 
     }).success(function(msg) { 
      button.prop('disabled', false); 
      $('#new_entry').html(msg); 
      $('.textbox').val(""); 
     }); 
    }); 
});