仅在提交后禁用提交按钮

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

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

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

我尝试禁用 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
    ...
    ..
}

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

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

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

这行得通，

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

正如许多人指出的那样，禁用提交按钮有一些负面的副作用(至少在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');
    }
  });

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

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

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

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

<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 中工作！

这是编辑过的脚本，希望对您有所帮助，

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

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

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

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

我总共做了这两个步骤：

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

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

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

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

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

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

我的问题陈述提供了很多解决方案，我认为这里的大多数人也都在回答相同的问题。

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

1. 我们有一个表单提交事件<form onsubmit="onFormSubmitted()"></form>。
2. 在onFormSubmitted()禁用提交按钮或执行所需的任何操作。
3. 以这种方式处理会保留您的 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);
 });

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

是这样。