asp.net - ダブルクリックを防ぐために送信ボタンを無効にすると、フォームが送信されないのはなぜですか?

Question

地球上の他のすべての Web 開発者と同様に、ユーザーがフォームの送信ボタンをダブルクリックするという問題があります。私の理解では、この問題を処理する従来の方法は、最初のクリックの直後にボタンを無効にすることですが、これを行うと投稿されません。

私はこれについていくつかの調査を行いましたが、神は十分な情報があることを知っていますが、フォーム送信のボタンを無効にする、ボタンを無効にするなどの他の質問は機能しているようです。送信後にボタンを無効にする元のポスターには、私と同じ問題があったようですが、彼がそれをどのように/解決したかについては言及されていません。

これを繰り返す方法に関するコードを次に示します（IE8 Beta2でテストされましたが、IE7でも同じ問題がありました）

私のaspxコード

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function btn_onClick()
    {
        var chk = document.getElementById("chk");
        if(chk.checked)
        {
            var btn = document.getElementById("btn");
            btn.disabled = true;
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <asp:Literal ID="lit" Text="--:--:--" runat="server" />
        <br />
        <asp:Button ID="btn" Text="Submit" runat="server" />
        <br />
        <input type="checkbox" id="chk" />Disable button on first click
    </form>
</body>
</html>

私のcsコード

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btn.Click += new EventHandler(btn_Click);
        btn.OnClientClick = "btn_onClick();";
    }

    void btn_Click(object sender, EventArgs e)
    {
        lit.Text = DateTime.Now.ToString("HH:mm:ss");
    }
}

ボタンをクリックすると、ポストバックが発生し、時刻が更新されることに注意してください。ただし、チェックボックスをオンにすると、次にボタンをクリックしたときにボタンが無効になりますが (予想どおり)、ポストバックは行われません。

ここで何が欠けているのですか？

前もって感謝します。

score 9 · Accepted Answer

私はあなたがこのタグを見逃していると思います：

UseSubmitBehavior="false"

このようにしてみてください：

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/>

説明

score 6 · Accepted Answer

fall888 は正しいです。あなたのアプローチはクロスブラウザーでは機能しません。この小さなスニペットを使用して、ダブルクリックを防ぎます。

score 6 · Accepted Answer

UseSubmitBehavior="false"送信ボタンを通常のボタン ( <input type="button">) に変換します。これが発生したくない場合は、送信ボタンを非表示にして、その場所に無効なボタンをすぐに挿入できます。これは非常に迅速に発生するため、ユーザーにはボタンが無効になっているように見えます。詳細はJosh Stodola のブログにあります。

コード例 (jQuery):

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

score 4 · Accepted Answer

HTML コントロールを「無効化」しても、すべての主要なブラウザーで常に一貫した動作が得られるとは限りません。そのため、(ASP.NET モデルを使用して) クライアントとサーバーで要素の状態を追跡する必要があるため、クライアント側でそれを行うことは避けようとします。

私がしたいことは、ボタンの className を以下を含む CSS クラスに切り替えることで、ウィンドウの表示部分からボタンを移動することです。

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

さて、ボタンの代わりに何を置きますか？

無効化されたボタンのように見える画像
または、「お待ちください...」というプレーンテキストのみ

そして、これは同じ方法で行うことができますが、逆です。ページの読み込み時に非表示になっている要素から始めて、フォームの送信時に表示される className に切り替えます。

score 2 · Accepted Answer

次の JQuery スクリプトを使用して、1 つのボタンがクリックされたときにすべてのボタン(入力タイプ = 送信およびボタン)を無効にします。

スクリプトをグローバル JavaScript ファイルに含めただけなので、新しいボタンを作成するときに何も覚えておく必要はありません。

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

このスクリプトは、Page_ClientValidate() のチェックで簡単に拡張できます。

score 1 · Accepted Answer

JQuery ユーザー向け

jQuery イベントリスナーを使用しているときに、ASP.NET ボタンの onClick イベントに JavaScript を直接追加しようとすると、さまざまな問題が発生します。

ボタンを無効にしてポストバックを機能させる最良の方法は、次のようにすることでした。

    $(buttonID).bind('click', function (e) {

        if (ValidateForm(e)) {

            //client side validation ok!
            //disable the button:
            $(buttonID).attr("disabled", true);

            //force a postback:
            try {
                __doPostBack($(buttonID).attr("name"), "");
                return true;
            } catch (err) {
                return true;
            }

        }
        //client side validation failed!
        return false;
    });

ValidateFormは、フォームがクライアント側を検証する場合に true または false を返すカスタム検証関数です。

そして、buttonIDは「#button1」などのボタンの ID です。

score 1 · Accepted Answer

これは、これを行うための正しくて簡単な方法です。

すべてのブラウザーで機能します (上記の受け入れられたソリューションとは異なります)。

アプリケーションでヘルパーメソッドを作成します (たとえば、ユーティリティネームスペースで)。

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page)
        button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

各 Web ページのコードビハインドから、次のように簡単に呼び出すことができます。

    Utility.PreventMultipleClicks(button1, page)

ここで、button1 は、複数のクリックを防止するボタンです。

これが行うことは、クリック時のハンドラーを次のように設定するだけです: this.disabled=true

ボタン独自のポストバックハンドラを追加すると、次のようになります。

onclick="this.disabled=true";__doPostBack('ID$ID','');"

これにより、ページのデフォルトの動作が損なわれることはなく、すべてのブラウザーで期待どおりに機能します。

楽しみ！

score 1 · Accepted Answer

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

score 0 · Accepted Answer

0

デバッグの目的で、if(chk.checked) に対して else 句を入れるとどうなりますか?

于 2008-12-30T16:01:52.197 に答える

score 0 · Accepted Answer

JavaScript 関数が true (またはブール値 true に評価される値) を返すことを確認してください。そうしないと、フォームが送信されません。

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}

asp.net - ダブルクリックを防ぐために送信ボタンを無効にすると、フォームが送信されないのはなぜですか?

10 に答える 10

Related

Reference