javascript - 仅在提交后禁用提交按钮

Question

我有以下 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 似乎与提交操作冲突。

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

score 44 · Accepted Answer

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

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

score 22 · Accepted Answer

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

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

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

score 14 · Accepted Answer

嘿，这行得通，

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

score 13 · Accepted Answer

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

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

score 8 · Accepted Answer

正如许多人所指出的，禁用提交按钮会产生一些负面影响（至少在 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');
    }
  });

score 6 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

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

我总共做了两个步骤：

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

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

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

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

score 4 · Accepted Answer

阅读评论，似乎这些解决方案在浏览器之间并不一致。然后决定思考 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 中工作！

score 3 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

我们有一个表单提交事件<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);

 });

score -1 · Accepted Answer

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

score -4 · Accepted Answer

  $(function(){

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

就这样。

javascript - 仅在提交后禁用提交按钮

14 回答 14

Related

Reference