时间戳

首页 > 解决方案 > 禁用按钮以避免多个表单提交

javascript - 禁用按钮以避免多个表单提交

问题描述

我有一个网络表单，我注意到它会生成相同数据的多次提交（间隔约 100 毫秒）。根据我的研究，表单提交后禁用按钮是要做的几件事之一。我有以下两种禁用表单按钮的方法：

Method 1:
$('form#my-form').submit(function(e) {
    $(this).find('button').prop("disabled",true);
    return true;
});

Method 2:
$('form#my-form').submit(function(e) {
    $(this).find('button').attr('onclick',"return false;");
});

让我们只关注在浏览器中提交表单时禁用按钮。哪种方法更好？还是其他更好的方法？有什么影响吗？我知道如果表单有多个用于不同事物的按钮，则方法 1 无法将单击哪个按钮的信息传递给后端。

标签： javascriptform-submit

解决方案

试试看，我认为延迟可以让你的工作变得轻松。

 $('#id').on('click',function(){
    // let a common class(disable-btn) for each button which should be disabled for on second
    $('.disable-btn').prop('disabled',true);
    setTimeout(function(){
       // enable click after 1 second
       $('.disable-btn').prop('disabled',false);
    },1000); // 1 second delay
});

推荐阅读