在sumbit上禁用按钮并在提交后重新启用

I have a script below which submits data to the server via ajax and works perfectly. What I want to achieve is to disable the button on submission and re-enable it after submission.

我有一个脚本，通过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

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>

8 个解决方案

#1

You can use prop() like

你可以使用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("");
        });
    });
});

#2

Try below code. user Ajax beforeSend event for that

试试下面的代码。用户Ajax beforeSend事件

$(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("");
            });
        });
    });

#3

Just update your code to following by adding two lines and it will work for you as desired.

只需添加两行代码即可将代码更新为以下代码，它将根据需要为您提供帮助。

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



        });
    });
});

For reference - http://api.jquery.com/prop/

供参考 - http://api.jquery.com/prop/

#4

Have you tried to set disabled attr on start of function (this.attr('disabled','disabled')) and re-enable on success (this.removeAttr('disabled'))?

您是否尝试在启动功能时设置禁用attr（this.attr（'禁用'，'禁用'））并在成功时重新启用（this.removeAttr（'disabled'））？

#5

I would try the following:

我会尝试以下方法：

$(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("");
        });
    });
});

#6

If you are doing this to prevent double-posts, disabling button is not the right thing to do. You must always do in in your code, not just in DOM:

如果你这样做是为了防止双重帖子，禁用按钮不是正确的做法。您必须始终使用代码，而不仅仅是在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);
    });
});

#7

$(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("");
        });
    });
});

#8

Disable on click event of input. Then enable in the success function of the jQuery Ajax.

禁用输入的单击事件。然后启用jQuery Ajax的success函数。