jquery 点击后禁用提交按钮,几秒钟后再次启用

y1aodyip  于 5个月前  发布在  jQuery
关注(0)|答案(7)|浏览(70)

我使用jquery $.post提交表单时。我想禁用按钮,如5秒后,它已被点击,以避免多次提交的形式。
这是我目前所做:

$('#btn').click(function(){
    $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
        $('#message').slideDown().html('<span>'+data+'</span>');
    });
});

字符串
我以前用过淡入淡出,但是当我快速点击按钮的时候,它仍然不起作用。我应该怎么做才能达到我想要的效果?

ar5n3qh5

ar5n3qh51#

你可以像这样做你想做的事情:

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

字符串
或者你可以使用jQuery的.complete()方法,该方法在aQuery收到响应后执行:

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

edit:this is an example,服务器端响应延迟3秒

编辑

因为即使答案是8岁,但仍然得到关注,jQuery越来越不受欢迎,我认为值得添加示例没有jQuery

const fewSeconds = 3
 
document.querySelector('#btn').addEventListener('click', (e) => {
    e.target.disabled = true
  setTimeout(() => {
   e.target.disabled = false
  }, fewSeconds * 1000)
})
<input type='button' id="btn" value="click me" />

的字符串

ddhy6vgd

ddhy6vgd2#

只要把这个放在你的JS中提交按钮所在的页面上

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

字符串
Code source

bakd9h0s

bakd9h0s3#

在@Teneff的扩展中,如果表单中有多个提交按钮,并且您希望服务器端的按钮名称。

<script type="text/javascript">
var fewSeconds = 5;
$('button').click(function(){
    var btn = $(this);
    var text = btn.text();
    setTimeout(function(){
        btn.prop('disabled', true);
        btn.text("Wait...");
    }, 10);
    setTimeout(function(){
        btn.prop('disabled', false);
        btn.text( text);
    }, fewSeconds*1000);
});
<script>

字符串

unftdfkk

unftdfkk4#

看看.success函数here,这就是你需要的。
所以您要做是在单击时禁用按钮

$('#btn').click(function(){
    $('#btn').attr('disabled', true);
    $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
        // code on completion here
        })
        .success(function() { 
           $('#btn').attr('disabled', false);
        })
    });
});

字符串
这种方式更好,如果您的请求需要超过5秒才能返回,会发生什么?

twh00eeo

twh00eeo5#

取任意形式的button,将其值累加到一个变量中,将值替换为“请等待......”,5秒后将之前保存的变量传递回去,禁用为false。

$('input[type=submit], input[type=button]').click(function(){
    var btn = $(this);
    var textd = btn.attr("value");
    btn.prop('disabled', true);
    btn.attr('value', 'Please wait...');
    setTimeout(function(){
    btn.prop('disabled', false);
    btn.attr('value', textd);
    }, fewSeconds*1000);
    });

字符串

iyfjxgzm

iyfjxgzm6#

简单解决方案:

DOM查询:

let btn = document.querySelector('#your-button')

字符串
将temporarilyDisableBtn()添加到事件队列:

btn.addEventListener('click', function () {
    // implementation
    temporarilyDisableBtn(btn)

    // your extra code here
}


禁用和重新启用btn的代码:

function temporarilyDisableBtn(btn) {
    btn.disabled = true;

    setTimeout(function () {
      btn.disabled = false;
    }, 1000);
}


这是一个通用的解决方案,适用于大多数实现。更多关于setTimeout()的内容。

i7uq4tfw

i7uq4tfw7#

$('#btn').live('click', function () {
            $(this).prop('disabled', true).delay(800).prop('disabled', false);
        });

字符串
//或者

$('#btn').live('click', function () {
            var obj = $(this);
            obj.prop('disabled', true);
            $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
                $('#message').slideDown().html('<span>' + data + '</span>');
                obj.prop('disabled', false);
            });
        });

相关问题