c# - 送信後にボタンを無効にする

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

です。このコードは2回投稿します（送信ボタンを無効にし、入力を検証します）：

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

このコードは 2 回投稿します (ただし、送信ボタンは無効になりません)。

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

このコードは 1 回投稿します (ただし、ユーザー入力を検証せず、送信ボタンを無効にしません)。

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

このコードは 1 回投稿します (ただし、送信ボタンは無効になりません)。

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

明らかに、問題を引き起こしているのは送信ボタンを無効にすることです。複数のクリックを避けるために送信を無効にする方法について何かアイデアはありますか?

score 4 · Accepted Answer

おそらく、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);" />

score 1 · Accepted Answer

答えは、return false を追加することです。あなたの最後の行の後;

例えば

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

でなければなりません

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

これは間違いなく私にとってはうまくいきました。

score 0 · Accepted Answer

以下のコードを試してください

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

score 0 · Accepted Answer

その行を取り出してください。フォームは送信ボタンであり、通常のボタンタイプではないため、フォームは既に送信されています。ASP.NET が要素をレンダリングする方法を見てください。

ページバリデーターは form.onsubmit コールバックで呼び出されるため、ページが有効でない場合はそこで検証されます。

したがって、その行を削除するだけで準備完了です。

score 0 · Accepted Answer

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

score -1 · Accepted Answer

これを試して：

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

c# - 送信後にボタンを無効にする

6 に答える 6

Related

Reference