Question

我使用jquery来避免多个表单提交，并且基本上禁用了点击按钮。一个糟糕的后果似乎是表单不再提交，因此问题是：是否可以禁用按钮但仍然提交表单？我知道我可以通过jQuery进行表单提交，但目前所有请求都是服务器端处理的（例如，在提交表单后，它返回一个完整的html页面，错误或成功响应）

这是我到目前为止的代码

<script type="text/javascript">
    jQuery(document).ready(function($) {
        setTimeout(function(){alert("Hello")}, 3000);

        $("#loginBtn").click(function() {
            $("#loginBtn").attr("disabled", "disabled");
        }); // click()
    }); // ready()
</script>
  <form id="myForm">
    <div class="form-actions">

        <input id="loginBtn"    class="btn btn-primary"  type="submit" name="login" value="Login">

修改只是为了确保清楚：表单不是通过AJAX提交

Answer 1

您需要返回true才能提交表单。首先写一个javascript函数

   function BeforeLoginSubmitted(sender) {
            $(sender).prop("disabled", true);
            return true;
        }

然后在html按钮中调用如下函数

  <input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
            onclick="return BeforeLoginSubmitted(this);" />

现在将提交表格。如果您在任何情况下都返回false，则不会提交表单。

编辑以下是该页面的完整示例代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
       function BeforeLoginSubmitted(sender) {
            $(sender).prop("disabled", true);
            return true;
        }
     </script>
</head>
<body>
    <form action="/" method="post" runat="server">

     <input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"
     onclick="return BeforeLoginSubmitted(this);" />

    </form>
</body>
</html>

编辑2 我在crome浏览器中看到了上述代码的一些问题。以下代码也适用于crome浏览器。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
       function BeforeLoginSubmitted() {
           $("#loginBtn").prop("disabled", true);
            return true;
        }
     </script>
</head>
<body>
    <form action="https://www.google.com" method="post" onsubmit="return BeforeLoginSubmitted(this);" >

     <input id="loginBtn" class="btn btn-primary" type="submit" name="login" value="Login"  />

    </form>
</body>
</html>

Answer 2

此任务可以通过ajax函数完成：

尝试这个逻辑：

<script>
$(document).ready(function(){
  $("#loginBtn").click(function(){
    $("#loginBtn").attr("disabled", "disabled");
    $.post("post file path here",
    {
      field1:"value1", //post data that will be used by other file
      field2:"value2",
      ..      ..  
    },
    function(response){
      if(response = "ok"){
          $("#loginBtn").prop('disabled', false);
      }
    });
  });
});
</script>

Answer 3

收听提交事件，而不是点击事件。

$("#form-id").on("submit", function () {
    $(this).find('[type="submit"]').attr("disabled","disabled");
});

Answer 4

这是一个例子，

<div class="form-actions" id="frm"></div>

    $('#frm').bind('submit', function(e) {
        $('#loginBtn').attr('disabled', 'disabled');

        alert('submitted');

        validForm = false;    

        // do stuff (validations, etc) here and return false or e.preventDefault() if you want to stop the form from submitting 

        if (!validForm) { 
            e.preventDefault();
            // reactivate the button if the form was not submitted
            $('#loginBtn').prop('disabled',true);
        }
    });

表单提交后是否可以禁用按钮？

4 个答案: