11

细节：

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

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

4

7 回答 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 禁用按钮可能不会阻止多次提交。

于 2008-09-05T16:05:04.677 回答
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" />
  • 真的很短。
于 2008-10-30T07:57:29.687 回答
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>
于 2008-09-05T16:08:22.580 回答
1

在 JQuery 中：

$('#SubmitButtonID').click(function() { this.disabled = true; });
于 2008-09-05T15:46:53.830 回答
1

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

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

于 2008-10-30T07:21:38.717 回答
0

可以通过三种方式提交应涵盖的表单。使用 David McLaughlin 和 Jimmy 的建议。一个将禁用提交按钮表单元素，而另一个禁用基本的 HTML 表单提交。

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

于 2008-09-05T16:05:08.797 回答
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;
    };
}

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

于 2008-10-30T06:40:13.150 回答