代码之家 › 专栏 › 技术社区 › John MacIntyre

当我禁用提交按钮以防止双击时,为什么我的表单不发布?

double-submit-prevention client-scripting javascript asp.net

John MacIntyre · 技术社区 · 17 年前

它不发帖

我确实做了一些研究,天知道有足够的信息,但其他问题像 Disable button on form submission ,禁用该按钮似乎有效。原海报 Disable button after submit 似乎和我有同样的问题,但没有提到他是如何解决的。

下面是一些关于如何重复它的代码(在IE8 Beta2中测试,但在IE7中有相同的问题)

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
<script language="javascript" type="text/javascript">
    function btn_onClick()
    {
        var chk = document.getElementById("chk");
        if(chk.checked)
        {
            var btn = document.getElementById("btn");
            btn.disabled = true;
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <asp:Literal ID="lit" Text="--:--:--" runat="server" />
        <br />
        <asp:Button ID="btn" Text="Submit" runat="server" />
        <br />
        <input type="checkbox" id="chk" />Disable button on first click
    </form>
</body>
</html>

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btn.Click += new EventHandler(btn_Click);
        btn.OnClientClick = "btn_onClick();";
    }

    void btn_Click(object sender, EventArgs e)
    {
        lit.Text = DateTime.Now.ToString("HH:mm:ss");
    }
}

请注意,当您单击该按钮时,将发生回发,并更新时间。但是,当您选中该复选框时,下次单击该按钮时,该按钮将被禁用(如预期的那样),但不会进行回发。

我到底错过了什么???

提前谢谢。

10 回复 | 直到 9 年前

MBender 12 年前

我想你只是错过了这个标签:

UseSubmitBehavior="false"

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/>

Explanation

Mauricio Scheffer 17 年前

this little snippet 防止双击。

Pavel Chuchuva grapeot 11 年前

UseSubmitBehavior="false" 将“提交”按钮转换为“正常”按钮( <input type="button"> )。如果您不希望发生这种情况,可以隐藏“提交”按钮,并立即在其位置插入“禁用”按钮。因为这种情况发生得太快,用户会觉得按钮被禁用了。详情载于 the blog of Josh Stodola

代码示例(jQuery):

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

Kon 17 年前

“禁用”HTML控件并不总是在所有主要浏览器中产生一致的行为。所以我尽量避免在客户端这样做,因为(使用ASP.NET模型)在这种情况下,您需要跟踪客户端和服务器上元素的状态。

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

现在,用什么来代替按钮呢?

一个看起来像被禁用按钮的图像
或者只是写着“请稍候…”的纯文本

这可以用同样的方法来做,但是相反。从页面加载时隐藏的元素开始,然后切换到表单提交时可见的类名。

Thomas Jespersen 16 年前

所有按钮 (输入类型=提交和按钮),当一键单击。

我们只是将脚本包含在一个全局JavaScript文件中,因此在创建新按钮时不必记住任何内容。

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

此脚本可以通过检查Page_ClientValidate()轻松扩展。

I.devries 17 年前

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

George Filippakos 14 年前

这是正确且简单的方法:

它适用于所有浏览器(不同于上述公认的解决方案)。

在应用程序中创建一个助手方法(例如在UTL命名空间中):

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page)
        button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

现在,从每个网页背后的代码中,您可以简单地调用:

    Utility.PreventMultipleClicks(button1, page)

其中button1是要防止多次单击的按钮。

这只需将点击处理程序设置为:this.disabled=true

onclick=“this.disabled=true”__doPostBack('ID$ID','');"

享受

George Filippakos 14 年前

对于JQUERY用户

在使用jQuery事件监听器时,如果试图将javascript直接添加到ASP.NET按钮上的onClick事件中,将会遇到各种各样的问题。

我发现禁用按钮并使回发生效的最佳方法是执行以下操作:

    $(buttonID).bind('click', function (e) {

        if (ValidateForm(e)) {

            //client side validation ok!
            //disable the button:
            $(buttonID).attr("disabled", true);

            //force a postback:
            try {
                __doPostBack($(buttonID).attr("name"), "");
                return true;
            } catch (err) {
                return true;
            }

        }
        //client side validation failed!
        return false;
    });

验证窗体 是您的自定义验证函数,如果表单验证客户端,它将返回true或false。

和 布特尼德 按钮的id是否为“#button1”

Neil Barnwell 17 年前

TJ L 17 年前

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}