Tắt nút bật tắt và bật lại sau khi gửi

Question

Tôi có một tập lệnh bên dưới gửi dữ liệu đến máy chủ qua ajax và hoạt động hoàn hảo. Điều tôi muốn đạt được là tắt nút khi gửi và bật lại sau khi gửi.

$(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

Chỉ cần cập nhật mã để sau bằng cách thêm hai dòng và nó sẽ làm việc cho bạn như mong muốn.

$(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 



     }); 
    }); 
}); 

Để tham khảo - http://api.jquery.com/prop/

Answer 2

Bạn có thể sử dụng prop() như

$(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

Bạn đã cố gắng để thiết lập attr vô hiệu hóa trên đầu chức năng (this.attr('disabled','disabled')) và kích hoạt lại thành công (this.removeAttr('disabled')) ?

Answer 4

Tắt sự kiện đầu vào nhấp chuột. Sau đó kích hoạt chức năng thành công của jQuery Ajax.

Answer 5

tôi sẽ thử như sau:

$(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

Hãy thử bên dưới mã. sử dụng Ajax beforeSend event cho rằng

$(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

Nếu bạn đang làm điều này để ngăn chặn hai bài viết, nút vô hiệu hóa không phải là điều phải làm. Bạn luôn luôn phải làm trong trong mã của bạn, không chỉ trong 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(""); 
     }); 
    }); 
});