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

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

Answer 1

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

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

Answer 2

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

我尝试禁用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处理程序中，＆＃39; real＆＃39;提交是隐藏的，而且是假的＆＃39;显示提交，并显示正在发送消息的消息。

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

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

Answer 3

嘿，这有效，

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

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

Answer 9

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

我完成了这两步：

1 - 禁用按钮并阻止双重提交：

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

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

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

Answer 10

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

Answer 11

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

并在服务器端代码中：

protected void YourButton_Clicked(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "$('#YourButtonID').removeAttr('disabled');", true);
}

Answer 12

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

crypto-project

Answer 13

  $(function(){

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

理解它。

提交后仅禁用提交按钮

13 个答案: