[英]Disable button after submit
我试图在用户提交付款表单时禁用按钮,并且发布表单的代码在firefox中导致双重帖子。 删除代码时不会发生此问题,并且除了firefox之外的任何浏览器中都不会发生此问题。
知道怎么防止这里的双重帖子?
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());
这是导致问题的sb.Append(Page.GetPostBackEventReference(btnSubmit))行
谢谢
编辑:这是按钮的c#:
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" />
这是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" />
此代码发布两次(但不禁用提交按钮):
<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="__doPostBack('ctl00$MainContent$cmdSubmit','');" id="ctl00_MainContent_cmdSubmit" />
此代码发布一次(但不验证用户输入并且不禁用提交按钮):
<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" id="ctl00_MainContent_cmdSubmit" />
此代码发布一次(但不禁用提交按钮):
<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$cmdSubmit", "", true, "", "", false, false))" id="ctl00_MainContent_cmdSubmit" />
此代码根本不发布:
<input type="submit" name="ctl00$MainContent$cmdSubmit" value="Submit" onclick="this.disabled = true;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$cmdSubmit", "", true, "", "", false, false))" id="ctl00_MainContent_cmdSubmit" />
显然,这是导致问题的提交按钮的禁用。 您有什么想法我们如何禁用提交以避免多次点击?
据推测, btnSubmit
已经连接了服务器端事件。 如果是这样,则不需要调用Page.GetPostBackEventReference
。 只需删除该行即可获得所需的行为。
更新:您提到在C#代码中附加事件处理程序,但您没有提到您在何处执行此操作。 我猜它在Page_Load
处理程序中。 如果是这种情况,它将无法正常工作,因为在此时挂钩按钮单击事件处理程序为时已晚。 让我们试试吧。
首先,将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;
}
对于你的ASPX按钮,试试这个:
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="return disableOnSubmit(this);" />
答案是添加一个返回false; 在你的最后一行之后;
例如
sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, ""));
sbValid.Append(";");
一定是
sbValid.Append(this.Page.ClientScript.GetPostBackEventReference(button, ""));
sbValid.Append(";return false;");
这绝对适合我。
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());
}
试试下面的代码
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" OnClientClick="this.style.display = 'none';"/>
拿出那一行,表单已经提交,因为它是一个提交按钮,而不是常规按钮类型,看看ASP.NET如何呈现元素。
页面验证器在form.onsubmit回调中调用,因此如果您的页面无效,它将在那里进行验证。
所以,只需删除该行即可设置。
试试这个:
<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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.