(クライアント側で) 送信ボタンを無効にするための最良のアプローチは何ですか?

StackOverflow https://stackoverflow.com/questions/46079

質問

詳細：

  • ユーザーが送信ボタンをクリックした後、サーバーにポストバックされる前にのみ無効にします。
  • ASP.NET Webフォーム (.NET 1.1)
  • jQuery を優先します (ライブラリがある場合)
  • フォームがリロードされる場合は有効にする必要があります (つまり、クレジットカードが使えませんでした）

これは必須ではありませんが、あまり変更せずに実行できる簡単な方法があれば、そうします。(すなわち、簡単な解決策がない場合は、おそらく実行しないので、あまり深く掘り下げることは心配しないでください)

役に立ちましたか？

解決

すべての送信ボタンについては、JQuery を使用すると次のようになります。

$('input[type=submit]').click(function() { this.disabled = true; });

あるいは、フォーム送信時にそうする方が便利かもしれません。

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

しかし、文脈をもう少し知っていれば、あなたの質問に対してより良い答えができると思います。

これが ajax リクエストの場合は、成功または失敗のいずれかで送信ボタンを再度有効にする必要があります。

これが標準の HTTP フォームの送信であり (JavaScript でボタンを無効にすることは別として)、同じフォームの複数の送信を防ぐためにこれを行う場合は、コード内で、 JavaScript でボタンを無効にしても、複数の送信を防止できない可能性があるためです。

他のヒント

次のようなことができます:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

これによる利点:

  • すべてのフォーム、すべての送信方法で機能します。
    • 送信要素をクリックする
    • Enterを押すか、
    • 電話をかける form.submit() 他のコードから
  • すべての submit 要素を無効にします。
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 本当に短いです。

送信の処理中に送信ボタンを複数回押してほしくないのだと思います。

私のアプローチは、ボタンを完全に非表示にし、代わりに何らかのステータスインジケーター（アニメーションGIFなど）を表示することでした。

これは非常に人為的な例です (技術的にはプロトタイプですが、jquery バージョンも非常に似ていると思います)。

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

JQueryでは:

$('#SubmitButtonID').click(function() { this.disabled = true; });

注意すべき点は、フォームを送信する前にボタンを無効にしないでください。OnClick イベントで JavaScript を使用してボタンを無効にすると、フォームの送信が失われる可能性があります。

したがって、JavaScript を使用してボタンの上に画像を配置するか、ボタンを表示範囲外に移動することでボタンを非表示にすることをお勧めします。これにより、フォームの送信が正常に続行できるようになります。

フォームを送信するには 3 つの方法があり、カバーする必要があります。David McLaughlin と Jimmy の両方の提案を使用してください。1 つは送信ボタンのフォーム要素を無効にし、もう 1 つは基本的な HTML フォームの送信を無効にします。

3 番目については、JavaScript による form.submit() の実行が無効になることはありません。の OnSubmit="return false" このメソッドは、ユーザーが送信ボタンをクリックするか、入力フォーム要素で Enter を押した場合にのみ適用されます。クライアント側のスクリプトも同様に処理する必要があります。

どうでしょうか

コードビハインド:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

JavaScript:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

これはポストバックがタイムアウトした場合に何が起こるかという問題を解決するものではありませんが、それ以外はうまくいきました。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top