提交后禁用按钮

Question

当用户提交付款表单并且发布表单的代码导致在 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(&quot;ctl00$MainContent$cmdSubmit&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_MainContent_cmdSubmit" />

此代码根本不发布：

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

显然是提交按钮的禁用造成了问题。您对我们如何禁用提交以避免多次点击有任何想法吗？

Answer 1

大概，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);" />

Answer 2

答案是加一个return false；在你的最后一行之后;

例如

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

必须

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

这绝对对我有用。

Answer 3

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

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

所以，只要删除那条线，你就会被设置。

Answer 4

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

Answer 5

试试下面的代码

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

2021 年 10 月 9 日更新：-- 另一个更好的解决方案

<button type="button" class="btn btn-primary btn-lg " id="load1" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

Answer 6

试试这个：

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