仅在提交后禁用提交按钮答案

【问题标题】：Disable submit button ONLY after submit仅在提交后禁用提交按钮
【发布时间】：2013-06-11 00:12:01
【问题描述】：

我有以下 HTML 和 jquery：

<html dir="ltr" lang="en">
<head>
</head>
<body>

<h2>Test disabling submit button for 1 minute...</h2>

<br/>

<p style="text-align:center"> 
<form id="yourFormId" name="yourFormId" method="post" action="#">
 <input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>
<!--script ends here-->

</body>
</html>

就目前而言，提交按钮在按下时会被禁用。但是，一旦按下它似乎不会执行提交。如果我删除了 jquery 以禁用该按钮，则该按钮将正常执行提交。

如何仅在执行提交后才禁用该按钮？上面当前的jquery好像和提交操作有冲突。

任何解决此问题的建议都会非常有帮助。

【问题讨论】：

你能不能不简单地在 JS 中使用 onMouseUp 来禁用按钮。

标签： javascript jquery button submit

【解决方案1】：

在提交事件中添加禁用部分。

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

【讨论】：

@GeoffreyFernandez 它绝对有效。你一定是做错了什么。
完美运行，@GeoffreyFernandez 检查您的表单和 btn id
对我来说，这完全禁用了提交按钮，因此即使第一次点击也无法通过。
如果<button> 具有value="" 属性，这将不起作用 - 如果它们被禁用，浏览器不会提交禁用的控件（输入、按钮、选择、文本区域），并且会发生这种情况在onsubmit 事件之后，而不是之前。
如果有人想知道submitBtn 是提交按钮的类（在我的例子中是class="btn"，所以我使用了$(".btn").attr...等

【解决方案2】：

这是编辑后的脚本，希望对你有帮助，

   <script type="text/javascript">
        $(function(){
            $("#yourFormId").on('submit', function(){
                return false;
                $(".submitBtn").attr("disabled",true); //disable the submit here
                //send the form data via ajax which will not relaod the page and disable the submit button
                $.ajax({
                   url      : //your url to submit the form,
                   data     : { $("#yourFormId").serializeArray() }, //your data to send here 
                   type     : 'POST',
                   success  : function(resp){
                        alert(resp);    //or whatever 
                   },
                   error    : function(resp){

                   }
                });
            })
        });
    </script>

【讨论】：

我想在按钮提交后禁用它...这样就不能再提交了
您是否通过 ajax 发布表单？否则页面将自动重新加载，无需禁用按钮。

【解决方案3】：

嘿，这行得通，

   $(function(){
     $(".submitBtn").click(function () {
       $(".submitBtn").attr("disabled", true);
       $('#yourFormId').submit();
     });
   });

【讨论】：

我发现了一个错误，它在 IE 11 中提交了两次表单。请注意这个实现。
不幸的是，我确认了 Dot Batch 所说的，而且在 IE10 中也可能发生同样的行为......
这是代码中的一个错误 - 您应该向点击处理程序声明参数“e”并调用 e.preventDefault();就可以了。
这里有一个单独的问题，如果在提交表单时按钮被禁用，那么按下的按钮的值不会与表单一起提交。因此，如果您有一个带有<input type="submit" name="save" value="Save"> 的表单，您在推送时不会在表单数据中收到save=Save。
这个实现在 chrome 中完全阻止了我的提交。

【解决方案4】：

我遇到了同样的问题。客户可以提交一个表格，然后多个电子邮件地址将收到一封邮件。如果页面响应时间过长，有时按钮会被按下两次甚至更多次..

我尝试禁用 onsubmit 处理程序中的按钮，但根本没有提交表单。以上解决方案可能工作正常，但对我来说有点太棘手了，所以我决定尝试其他方法。

在提交按钮的左侧，我放置了第二个按钮，该按钮不显示并且在启动时被禁用：

<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>   
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>

在附加到表单的 onsubmit 处理程序中，“真实”提交是隐藏的，而“假”提交会显示一条消息，表明正在发送消息。

function checkinput // submit handler
{
    ..
    ...
    $("#btnverzenden").hide(); <= real submit button will be hidden
    $("#btnverzenden2").show(); <= fake submit button gets visible
    ...
    ..
}

这对我们有用。希望对你有帮助。

【讨论】：

这是我发现的最神奇的解决方案 - 我的 jQ 验证脚本无法使用 .attr("disabled", "true"); ...表单只是不发送，而提交按钮被禁用...您的答案是黄金！ ...但是是的，它是一个 hack :)) 谢谢！！！
谢谢。非常直接。

【解决方案5】：

$(document).ready(function() {
    $(body).submit(function () {
        var btn = $(this).find("input[type=submit]:focus");
        if($(btn).prop("id") == "YourButtonID")
            $(btn).attr("disabled", "true");
    });
}

【讨论】：

【解决方案6】：

此解决方案具有在移动设备上工作且非常简单的优点：

<form ... onsubmit="myButtonValue.disabled = true; return true;">

【讨论】：

在 Chrome 中，这似乎是为了防止按下按钮的名称/值被提交到服务器。如果您有一个名称为“保存”的按钮和一个名称为“取消”的按钮，并且您需要知道用户按下了哪个按钮，那么这一点很重要。
迄今为止最好、最短的解决方案……也是唯一对我有用的解决方案

【解决方案7】：

我把它放在我的全局代码中，以处理所有提交按钮：

$("input[type='submit']").on("click", function (e) {
    $(this).attr("disabled", true);
    $(this).closest("form").submit()
});

【讨论】：

【解决方案8】：

阅读 cmets，似乎这些解决方案在浏览器之间并不一致。然后决定想想 10 年前在 jQuery 和事件函数绑定出现之前我会怎么做。

所以这是我的复古时髦解决方案：

<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false;  }" action="" method="GET">

<input type="submit" value="submit - but only once!"/>
</form>

主要区别在于我依赖于通过在提交处理程序上返回 false 来停止表单提交的能力，并且我使用的是全局标志变量 - 这会让我直接下地狱！

但从好的方面来说，我无法想象任何浏览器兼容性问题 - 嘿，它甚至可能在 Netscape 中工作！

【讨论】：

【解决方案9】：

  $(function(){

    $("input[type='submit']").click(function () {
        $(this).attr("disabled", true);   
     });
  });

就是这样。

【讨论】：

请添加一些解释。 :)
-1。此代码与 OP 的代码执行相同的工作。其次，它会阻止表单提交（这是 OP 首先遇到的问题）。

【解决方案10】：

使用 setTimeout 进行测试，这对我有用，我可以提交我的表单，参考这个答案 https://stackoverflow.com/a/779785/5510314

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        setTimeout(function () { disableButton(); }, 0);
    });

    function disableButton() {
        $("#btnSubmit").prop('disabled', true);
    }
});

【讨论】：

试过这个，因为它看起来像一个优雅的解决方案，虽然它禁用了按钮，但并没有阻止我双击按钮（如果点击速度足够快）。
尝试在单击事件之后和您的操作之前调用 Jquery 函数 .off() 以及 $(this).off("click"); 之类的 setTimeout。然后在需要时重新绑定按钮以单击事件
这对我来说绝对是最简单的解决方案。我在 ASP.NET Web 表单中工作，它添加了自己的点击和提交处理程序，这可以工作而不必干扰任何这些。

【解决方案11】：

当我将bind 部分添加到我的脚本文件时，我的问题得到了解决。

我总共做了两步：

1 - 禁用按钮并防止重复提交：

$('form').submit(function () {
    $(this).find(':submit').attr('disabled', 'disabled');
});

2 - 如果发生验证错误，则启用提交按钮：

$("form").bind("invalid-form.validate", function () {
    $(this).find(':submit').prop('disabled', false);
});

【讨论】：

【解决方案12】：

正如许多人所指出的，禁用提交按钮会产生一些负面影响（至少在 Chrome 中，它会阻止提交所按下按钮的名称/值）。我的解决方案是简单地添加一个属性来指示已请求提交，然后在每次提交时检查该属性是否存在。因为我使用的是提交函数，所以只有在所有 HTML 5 验证成功后才会调用它。这是我的代码：

  $("form.myform").submit(function (e) {
    // Check if we have submitted before
    if ( $("#submit-btn").attr('attempted') == 'true' ) {
      //stop submitting the form because we have already clicked submit.
      e.preventDefault();
    }
    else {
      $("#submit-btn").attr("attempted", 'true');
    }
  });

【讨论】：

+1 在提交按钮上设置“禁用”属性会使表单提交不包括按钮名称/值，因此如果您的服务器端代码期望找到该参数，它将丢失。这个建议确实有效，因为它实际上阻止了重复提交时的默认行为（表单提交）

【解决方案13】：

我不建议将 JavaScript 直接放入 HTML，但这适用于现代浏览器（不是 IE11），可在表单提交后禁用所有提交按钮：

<form onsubmit="this.querySelectorAll('[type=submit]').forEach(b => b.disabled = true)">

【讨论】：

【解决方案14】：

我为我的问题陈述经历了很多解决方案，我认为这里的大多数人也给出了相同的答案。

通常，当您进行服务器端表单提交时，用户可能会多次单击该按钮，从而导致多次提交。因此，为防止这种情况，应在首次提交后禁用该按钮。这就是以最优雅的方式对我有用的方法。

我们有一个表单提交事件<form onsubmit="onFormSubmitted()"></form>。
在onFormSubmitted() 中禁用您的提交按钮或执行任何所需的操作。
以这种方式处理会保留您的 html 验证，并在首次单击按钮时触发表单提交时禁用按钮。

function onSubmit() {
  $('.btn_submit').attr('disabled', true);
}

<form class="contact_form" method="POST" autocomplete="off" onsubmit="onSubmit()">

  <input name="email" id="email">
  <button class="btn_submit" type="submit">Submit</button>

</form>

或者，您还可以为整个项目的表单创建全局表单提交处理程序。

$('form').on('submit', function() {
   $(this).find(":submit").prop('disabled', true);

 });

【讨论】：