logo标签列表

（客户端）禁用提交按钮的最佳方法是什么？

asp.netjavascriptjquerywebforms.net-1.1
11

细节：

  • 只有在用户点击提交按钮之后，但在向服务器回传数据前才禁用
  • ASP.NET Webforms (.NET 1.1)
  • 优先使用jQuery（如果要使用任何库）
  • 如果表单重新加载（即信用卡失败），则必须启用

这不是必须要做的事情，但如果有一种简单的方法可以做到而不需要太多更改，我会这样做。（即，如果没有简单的解决方案，我可能不会这么做，所以不用担心深入研究）

7个回答
12
所有提交按钮，通过 JQuery，应该如下所示：
$('input[type=submit]').click(function() { this.disabled = true; });

或者在表单提交时这样做可能更有用：

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

如果我们了解更多背景信息，我们可能能够给出更好的答案。

如果这是一个ajax请求，那么你需要确保在成功或失败时重新启用提交按钮。

如果这是标准的HTTP表单提交（除了使用javascript禁用按钮）并且您正在这样做以防止多次提交相同的表单，则应该在处理提交的数据的代码中具有某种控制，因为使用javascript禁用按钮可能无法防止多次提交。

8
你可以这样做：
$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

以下是这样做的好处：

  • 它可以与您所有的表单一起使用，包括所有提交方法：
    • 点击提交元素
    • 按下回车键或
    • 从其他代码中调用form.submit()
  • 它将禁用所有提交元素：
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 代码非常简短。
5

我猜你不希望在提交处理过程中，用户重复点击提交按钮。

我的做法是完全隐藏该按钮，并显示某种状态指示器（动画gif等）。

这里有一个非常牵强的例子（它技术上是原型，但我认为jquery版本会非常相似）：

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>
+1对我很有帮助，因为我需要在请求中提交按钮的值。禁用按钮意味着该值不会被提交。 - ajbeaven
1

in JQuery:

$('#SubmitButtonID').click(function() { this.disabled = true; });
1
需要注意的一点是，在表单提交之前不应禁用按钮。如果在 OnClick 事件中使用 JavaScript 禁用按钮，则可能会丢失表单提交。
因此，我建议您使用 JavaScript 隐藏按钮，可以通过在其上方放置图像或将按钮移出可见范围来实现。这样应该可以正常进行表单提交。
0

如何呢？

后台代码:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

这并不能解决PostBack超时的问题，但除此之外，它对我很有效。

0

有三种提交表单的方法需要涵盖。使用David McLaughlin和Jimmy的建议。其中一个将禁用提交按钮表单元素，而另一个将禁用基本的HTML表单提交。

对于第三个，这些方法不会禁用Javascript执行form.submit()。当用户单击提交按钮或在输入表单元素中按Enter时，OnSubmit="return false"方法才适用。客户端脚本也需要处理。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接