当前位置：文江博客话题详情

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

发布于 2024-07-04 10:06:38 字数 249 浏览 9 评论 0原文

详细信息：

仅在用户单击提交按钮后但在回发到服务器之前禁用
ASP.NET Webforms (.NET 1.1)
首选 jQuery（如果有任何库）
如果表单重新加载（即信用卡失败），则必须启用此

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唯憾梦倾城 2024-07-11 10:06:39

在 JQuery 中：

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

in JQuery:

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

回复收藏 0 原文

酒绊 2024-07-11 10:06:39

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

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

回复收藏 0 原文

白云悠悠 2024-07-11 10:06:39

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

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

回复收藏 0 原文

铁憨憨 2024-07-11 10:06:39

怎么样

代码隐藏

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

Javascript：

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

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

How about

Code behind:

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

Javascript:

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

This doesnt solve the problem of what happens if the postback times out, but other than that it worked for me.

回复收藏 0 原文

指尖上得阳光 2024-07-11 10:06:39

您可以这样做：

$('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()
它将禁用所有提交元素：
- <输入类型=“提交”/>
- <按钮类型=“提交”>
- <输入类型=“图像”/>
它真的很短。

You could do something like this:

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

Benefits of this:

It will work with all your forms, with all methods of submission:
- clicking a submit element
- pressing enter, or
- calling form.submit() from some other code
It will disable all submit elements:
- <input type="submit"/>
- <button type="submit"></button>
- <input type="image" />
it's really short.

回复收藏 0 原文

秉烛思 2024-07-11 10:06:39

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

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

I'm guessing that you don't want them to hit the submit button more than once while the submit is processing.

My approach has been to just hide the button entirely and display some sort of status indicator (animated gif, etc) instead.

Here's a very contrived example (it's technically in prototype but I think a jquery version would be very similar):

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

回复收藏 0 原文

瑾夏年华 2024-07-11 10:06:38

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

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

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

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

但我认为，如果我们对上下文了解更多一点，我们可以为您的问题提供更好的答案。

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

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

For all submit buttons, via JQuery, it'd be:

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

Or it might be more useful to do so on form submission:

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

But I think we could give a better answer to your question if we knew a bit more about the context.

If this is an ajax request, then you'll need to make sure you enable submit buttons again on either success or failure.

If this is a standard HTTP form submission (aside from disabling the button with javascript) and you're doing this to safe guard from multiple submissions of the same form, then you ought to have some sort of control in the code that deals with the submitted data, because disabling a button with javascript might not prevent multiple submissions.

回复收藏 0 原文

~没有更多了~