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

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

質問

地球上の他のすべての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");
    }
}

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

ここに何がありますか？

事前に感謝します。

役に立ちましたか？

解決

このタグが欠落していると思います：

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

説明

他のヒント

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

UseSubmitBehavior="false"は、送信ボタンを通常のボタン（<input type="button">）に変換します。これを行わない場合は、送信ボタンを非表示にして、その場所に無効なボタンをすぐに挿入できます。これは非常に迅速に行われるため、ユーザーにはボタンが無効になっているように見えます。詳細はジョシュ・ストドラのブログ。

コード例（jQuery）：

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

<！> quot;無効化<！> quot; HTMLコントロールは、すべての主要なブラウザーで常に一貫した動作を生成するわけではありません。そのため、（ASP.NETモデルを使用して）その場合はクライアントとサーバーの要素の状態を追跡する必要があるため、クライアント側でそれを行わないようにします。

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

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

今、ボタンの代わりに何を置くべきですか？

  1. 無効なボタンのように見える画像
  2. または<！> quot;お待ちください... <！> quot;

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

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

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

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

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

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

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

すべてのブラウザで動作します（上記の承認済みソリューションとは異なります）。

アプリケーションでヘルパーメソッドを作成します（Utlity名前空間など）：

    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は、複数クリックを防止するボタンです。

これは、on clickハンドラーをthis.disabled = trueに設定するだけです

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

onclick = <！> quot; this.disabled = true <！> quot ;; __ doPostBack（ 'ID $ ID'、 ''）; <！> quot;

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

お楽しみください

デバッグの目的で、if（chk.checked）に対してelse句を設定するとどうなりますか？

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
}

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です

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