C# 提交后禁用按钮

Disable button after submit

提问by Chris Philpotts

I'm trying to disable a button when a user submits a payment form and the code to post the form is causing a double post in firefox. This problem does not occur when the code is removed, and does not occur in any browser other than firefox.

当用户提交付款表单并且发布表单的代码导致在 Firefox 中出现双重发布时，我试图禁用一个按钮。去掉代码时不会出现这个问题，除了firefox以外的任何浏览器都不会出现这个问题。

Any idea how to prevent the double post here?

知道如何防止这里出现双重帖子吗？

System.Text.StringBuilder sb = new StringBuilder();
sb.Append("if (typeof(Page_ClientValidate) == 'function') { ");
sb.Append("if (Page_ClientValidate() == false) { return false; }} ");
sb.Append("this.value = 'Please wait...';");
sb.Append("this.disabled = true;");
sb.Append(Page.GetPostBackEventReference(btnSubmit ));
sb.Append(";");
btnSubmit.Attributes.Add("onclick", sb.ToString());

it's the sb.Append(Page.GetPostBackEventReference(btnSubmit )) line that's causing the issue

这是导致问题的 sb.Append(Page.GetPostBackEventReference(btnSubmit)) 行

Thanks

谢谢

EDIT: Here's the c# of the button:

编辑：这是按钮的 c#：

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" />

here's the html

This code posts twice (and disables the submit button and verifies input):

这是 html

此代码发布两次（并禁用提交按钮并验证输入）：

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == false) { return false; }} this.value = 'Please wait...';this.disabled = true;document.getElementById('ctl00_MainContent_cmdBack').disabled = true;__doPostBack('ctl00$MainContent$cmdSubmit','');" id="ctl00_MainContent_cmdSubmit" />

This code posts twice (but doesn't disable the submit button):

此代码发布两次（但不会禁用提交按钮）：

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="__doPostBack('ctl00$MainContent$cmdSubmit','');" id="ctl00_MainContent_cmdSubmit" />

This code posts once (but doesn't verify the user input and doesn't disable the submit button):

此代码发布一次（但不验证用户输入并且不禁用提交按钮）：

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" id="ctl00_MainContent_cmdSubmit" />

This code posts once (but doesn't disable submit button):

此代码发布一次（但不会禁用提交按钮）：

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$cmdSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_cmdSubmit" />

This code doesn't post at all:

此代码根本不发布：

<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="this.disabled = true;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$cmdSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_cmdSubmit" />   

Obviously it's the disabling of the submit button that's posing the problem. Do you have any ideas how we can disable the submit to avoid multiple clicking?

显然，禁用提交按钮是造成问题的原因。您有什么想法我们可以禁用提交以避免多次点击吗？

回答by Jeromy Irvine

Presumably, btnSubmitalready has a server-side event hooked up. If so, the call to Page.GetPostBackEventReferenceshould not be necessary. You should get your desired behavior simply by removing that line.

据推测，btnSubmit已经连接了一个服务器端事件。如果是这样，则Page.GetPostBackEventReference不需要调用。您只需删除该行即可获得所需的行为。

Update: You mentioned attaching the event handler in C# code, but you don't mention where you do that. I'm guessing it's in the Page_Loadhandler. If that is the case, it wouldn't work properly, as it's too late to hook up a button click event handler at that point. Let's try this instead.

更新：你提到在 C# 代码中附加事件处理程序，但你没有提到你在哪里这样做。我猜它在Page_Load处理程序中。如果是这种情况，它将无法正常工作，因为此时连接按钮单击事件处理程序为时已晚。让我们试试这个。

First, it would be cleaner to put the JS into it's own function rather than building it in the C# code-behind. I suggest that you put it into a script block (or better yet, it's own .js file.)

首先，将 JS 放入它自己的函数中而不是在 C# 代码隐藏中构建它会更干净。我建议你把它放到一个脚本块中（或者更好的是，它是自己的 .js 文件。）

function disableOnSubmit(target)
{
    if (typeof(Page_ClientValidate) == 'function') {
        if (Page_ClientValidate() == false) { return false; }
    }
    target.value = 'Please wait...';
    target.disabled = true;
    return true;
}

And for your ASPX button, try this:

对于你的 ASPX 按钮，试试这个：

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="return disableOnSubmit(this);" />

回答by FlySwat

Take that line out, the form will already submit because it is a submit button, not a regular button type, take a look at how ASP.NET renders the element out.

去掉那行，表单已经提交了，因为它是一个提交按钮，而不是一个普通的按钮类型，看看 ASP.NET 是如何呈现元素的。

Page validators are called in the form.onsubmit callback, so if your page is not valid, it will be validated there.

页面验证器在 form.onsubmit 回调中调用，因此如果您的页面无效，则会在那里进行验证。

So, just remove that line and you'll be set.

因此，只需删除该行即可设置。

回答by ta4ka

private void checkButtonDoubleClick(Button button)
    {
        System.Text.StringBuilder sbValid = new System.Text.StringBuilder();
        sbValid.Append("if (typeof(Page_ClientValidate) == 'function') { ");
        sbValid.Append("if (Page_ClientValidate() == false) { return false; }} ");
        sbValid.Append("this.value = 'Please wait...';");
        sbValid.Append("this.disabled = true;");
        sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, ""));
        sbValid.Append(";return false;");
        button.Attributes.Add("onclick", sbValid.ToString());
    }

回答by Clyde

The answer is the add a return false; after your last line ;

答案是添加一个返回false；在你的最后一行之后；

for example

例如

sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, "")); 
sbValid.Append(";");

must be

必须是

 sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, "")); 
 sbValid.Append(";return false;");

this definitely worked for me.

这绝对对我有用。

回答by fgohil

Try below code

试试下面的代码

<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="this.style.display = 'none';"/>

回答by joy

Try this:

尝试这个：

<asp:Button ID="btn" runat="server" Text="something"  onclick="btn_Click" 
ValidationGroup="V1" onClientClick="if(Page_ClientValidate('V1'))
{this.disabled=true;this.value='Please Wait....';__doPostBack(this.id);}
"UseSubmitBehavior="false"  />