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

StackOverflow https://stackoverflow.com/questions/46079

题

细节：

  • 仅在用户单击提交按钮后、发回服务器之前禁用
  • ASP.NET 网络表单 (.NET 1.1)
  • 更喜欢 jQuery（如果有的话）
  • 如果表单重新加载，则必须启用（即信用卡失败）

这并不是我必须这样做的，但如果有一种简单的方法可以做到这一点，而无需做太多改变，我就会这样做。（IE。如果没有简单的解决方案，我可能不会这样做，所以不要担心挖得太深）

有帮助吗？

解决方案

对于所有提交按钮，通过 JQuery，它是：

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

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

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

但我认为，如果我们对背景有更多了解，我们可以更好地回答你的问题。

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

如果这是一个标准的 HTTP 表单提交（除了使用 javascript 禁用按钮之外），并且您这样做是为了防止同一表单的多次提交，那么您应该在处理处理该表单的代码中拥有某种控制权。已提交的数据，因为使用 javascript 禁用按钮可能不会阻止多次提交。

其他提示

你可以这样做：

$('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;
        })
    ;
});

这样做的好处：

  • 它将适用于您的所有表单和所有提交方法：
    • 单击提交元素
    • 按 Enter 键，或
    • 呼叫 form.submit() 来自其他一些代码
  • 它将禁用所有提交元素：
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 真的很短。

我猜您不希望他们在处理提交时多次点击提交按钮。

我的方法是完全隐藏按钮并显示某种状态指示器（动画 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>

在 JQuery 中：

$('#SubmitButtonID').click(function() { this.disabled = true; });

需要注意的是，您不应在提交表单之前禁用该按钮。如果您在 OnClick 事件中使用 javascript 禁用该按钮，您可能会丢失表单提交。

因此，我建议您使用 javascript 隐藏按钮，方法是在按钮上方放置图像或将按钮移出可见范围。这应该允许表单提交正常进行。

应涵盖三种提交表格的方法。使用大卫·麦克劳克林和吉米的建议。一个将禁用提交按钮表单元素，而另一个将禁用基本 HTML 表单提交。

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

怎么样

代码隐藏:

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

JavaScript:

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

这并不能解决回发超时时会发生什么的问题，但除此之外它对我有用。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top