web-dev-qa-db-ja.com

ユーザーがボタンを2回クリックするのを防ぐにはどうすればよいですか？

古いASP.NET Webフォームアプリケーション（.NET 2.0）には、ボタンがクリックされたときに実行するのに30秒ほどかかるプロセスがあります。ボタンが2回クリックされるのを防ぐ必要があります。これにより、データベース内の重複データの原因となる2回の投稿が防止されます。

追加してみました。

OnClientClick="this.disabled='true';"

javaScriptでボタンを無効にしようとします。ただし、ボタンは無効になりますが、ボタンのポストバックは機能しません。

複数の送信を防ぐためにボタンを無効にすることは、このアプリケーションにとって理想的です。これどうやってするの？

編集

サードパーティのコントロールを使用できません。

asp.netwebforms
44
Richard

OnClientClickの後にtrueを返す必要があります。

OnClientClick="this.disabled='true';return true;"

ポストバックを続行する場合、クライアント側のクリックはすべてtrueを返す必要があります。これは、ボタンが押されたときにクライアント側の検証を提供する手段です。

23
Mantorok

ボタンを単に無効にすると、ASP.NETはフォームを送信しません。また、クライアント側の検証に対処する必要があります。私のソリューションは次のとおりです。

<asp:Button runat="server" ID="btnSave" 
   Text="Save" OnClick="btnSave_Click" 
   OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Saving...';" 
   UseSubmitBehavior="false" />

UseSubmitBehaviorの説明については、 @ Dave Wardの投稿 を参照してください。

複数の検証グループがある場合は、このソリューションを強化する必要があります。

80
Rory

ボタンのUseSubmitBehaviorプロパティをfalseに設定 も必要です。

Webブラウザは、フォームのPOSTデータに無効な要素を含めません。たとえ要素が最初にフォーム送信をトリガーしたボタンであったとしても、残念ながらASP.NET WebFormsのシングルフォームページのデザインは、どのコントロールがPostBackを発生させ、どのイベントハンドラーを実行するか（つまりButton1.On_Click）を知るために、その情報に依存しています。

_UseSubmitBehavior="false"_に切り替えると、クライアント側のonclickハンドラーに__doPostBack('Button1', '')が挿入され、その問題を回避できます。その後、Buttonを無効にしても、___doPostBack_パラメーターにより、ASP.NETは、PostBackを発生させたコントロールとサーバー側で発生するイベントを認識します。

16
Dave Ward

上記のソリューションのほとんどは、PostBackを取得できないため、無効にすることはできません。これは私が見た中で最もシンプルでクリーンな作業ソリューションです。

OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"
12
Mike Socha III

すべての検証および検証グループの問題を回避するには、window.onbeforeunloadイベント、そう

<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

上記のスクリプトは、ページが検証を含むPostBackを実行する準備ができるか、ASP.Netフォームが送信されるとすぐにASP.Netボタンを無効にします。

ダブルクリックを防ぐために、クリック後にASP.Netボタンを無効にする

9
wezzix

この問題を解決するには、リンクが非常に役立つことがわかりました ダブルクリックを防ぐために、クリック後にASP.Netボタンを無効にします

私はそれが役立つことを願っています:)

4
Ahmed Elbatt

通常、このメソッドをBasePageに追加して再利用します。

このコードは検証も処理します

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name="button">The button.</param>
/// <param name="text">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text="wait..." )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm", "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("if(typeof(Page_ClientValidate)=='function' && !Page_ClientValidate()){{return true;}}this.value='{1}';this.disabled=true;{0}",
        ClientScript.GetPostBackEventReference(button, string.Empty),text));
}
2
giammin

長所

  • すべてのボタンがすぐに使える
    • 送信をトリガーしなかったボタンも無効になります。
    • LinkBut​​tonsも無効になります。
  • UpdatePanelsで動作します（つまり、部分的および非同期のポストバック）
  • 完全なポストバックに対応
  • 検証がポストバックを妨げる場合、ボタンを無効にしない
  • ボタンを押す、Enterキーを押す、およびAutoPostBackイベントにより、ボタンが無効になります

制限事項

†私が見た他のほとんどのソリューションには同じ制限があります

  • JQueryに依存
  • † ASPフォームに対してのみ機能します
  • †ユーザーが送信後にブラウザーのキャンセルボタンをクリックすると、ユーザーは再度送信できなくなり、混乱する可能性があります。
  • †ユーザーがポストバックを開始できる他の方法が残っています：
    • Enterキーを使用して送信する
    • 自動ポストバックイベント

コード

このスニペットをHTMLコードの最後の</body>タグ。

<script type="text/javascript">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = 'asp-postback-disable';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            'a[href^="javascript:__doPostBack"]',
            ':submit'
        ].join(",");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === 'object' && console.error != null) {
                console.error('Prevent Double Submit Error:', ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector, 'form')
                    .addClass(disabledClass)
                    .on('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $('.asp-postback-disable,' + submittableSelector, 'form')
                    .removeClass(disabledClass)
                    .off('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === 'object') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s, e) { disableSubmit(); });
            prm.add_endRequest(function (s, e) { enableSubmit(); });
        }
        else {
            error('Sys is undefined.');
        }

        // Handle navigation (eg, Full postback)
        $(window).bind('beforeunload', function (e) {
            disableSubmit();
        });

    });
</script>

<style type="text/css">
    .asp-postback-disable { opacity: 0.25; }
</style>
1
sparebytes

フィードバックを維持するために、ボタンを非表示にするか、ロードGIF用に変更することもできます

$(document).on('submit','form',function (e) {
    $("input.SubmitButton").hide();
    // or change if to an loading gif image.
    return true;
});
0
EduLopez

Aspx.csファイルから、これに対処するスクリプトを追加できます（これは私のために働いた唯一のソリューションであり、wexxixによって提供されました）

//Declaring the string to hold the script
string doubleClickScript = @"<script type='text/javascript'>
                                    function DisableButton() {
                                    document.getElementById('YOURBUTTONID').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(), "DoubleClickScript", doubleClickScript);

明らかに、ページにスクリプトを追加するだけで、顧客のC＃コードにアクセスできるようになったので、そのように使用しました。ありがとう

0
Ernest

できることの1つは、クリックした後、クライアント側で非表示にし、ローダーイメージを表示することです。

または、そのフォームまたは何かあなたがrecaptchaを追加できる場合

0
Mahesh KP

しばらく探した後、私はこの解決策を思いつきました。

$('form').submit(function () {
    $('input[type=submit][data-loading]').addClass('disabled');

    if ($(this).data('submitted') == true) {
        $('input[type=submit][data-loading]').attr('disabled', 'disabled');
        return false;
    }

    $(this).data('submitted', true);
});

UseDefaultBehaviorソリューションの問題は、Enterキーが頻繁に使用されるフォームの送信を停止することです。私は、かなりの割合のユーザーがクリックする代わりに入力を試みると仮定しています。

0
Fabio Milheiro

また、同じスタイルのクライアント側ボタンを作成し、「元の」サーバー側ボタンを非表示にし、JavaScriptを使用してHTMLボタンを無効にするか、元のボタンをクリックしてクリックすることで、「ハック」することもできます。

次のポストバックでは、クライアント側のボタンでの変更が自動的に元に戻ります:)。

<asp:Button ID="btnSubmitQuote" class="btn btn-red btn-block" runat="server" Text="Submit Quote" style="display:none;" OnClick="btnSubmitQuote_Click" UseSubmitBehavior="false" />

<button id="btnSubmitQuoteClient"  class="btn btn-red btn-block" onclick ="disableBtn(this);">Submit Quote</button>
<script type="text/javascript">
 function disableBtn(t) {
    t.setAttribute('disabled', 'disabled');
    var btn = document.getElementById('<%=btnSubmitQuote.ClientID %>');
    btn.click();
  }
0
ManNguyenIO