web-dev-qa-db-ja.com

ダブルクリックを防ぐために、クリック後にasp.netボタンを無効にします

ユーザーがダブルクリックを防ぐためにクリックした後に無効にする必要があるASP.NETボタンがあります。送信が完了したら、再度有効にする必要があります。誰でもこれで私を助けることができますか?

43
Goutham

Asp.netボタンオブジェクトに有効なソリューションを次に示します。フロントエンドで、次の属性をasp:Button定義に追加します。

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

バックエンドのクリックイベントハンドラーメソッドの呼び出しで、このコードを最後に追加します(finallyブロックに追加することが望ましい)

myButton.Enabled = true;
35
kmonty

私は this を見つけました、そしてそれは動作します:

btnSave.Attributes.Add(
    "onclick", 
    "this.disabled = true;" + ClientScript.GetPostBackEventReference(btnSave, null) + ";");
31
gkneo

最も簡単な方法であるこのリンクを確認してください。検証は無効になりません。

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

あなたが持っている場合.

  <form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Clicked" />
  </form>

その後、使用することができます

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

ボタンを無効にするにはifおよびafter検証が成功しました。ページはサーバーのポストバックを行っています。

15

応答の遅いサーバー側コードによるダブルクリックを防ぎたい場合、これはうまくいきます:

<asp:Button ... OnClientClick="this.disabled=true;" UseSubmitBehavior="false" />

Threading.Thread.Sleep(5000)をサーバーの_Click()イベントに配置してみると、サーバーがクリックイベントを処理している間、ボタンが無効になっていることがわかります。

サーバー側のコードを使用してボタンを再度有効にする必要もありません!

8
Shaun Keon

誰も気にしない場合、最初にこの投稿を見つけましたが、ページの検証でASP.NETのビルドを使用します。ソリューションは機能しますが、検証済みであってもボタンを無効にします。次のコードを使用して、ページ検証に合格した場合にのみボタンを無効にするようにすることができます。

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Submit" OnClientClick=" if ( Page_ClientValidate() ) { this.value='Submitting..'; this.disabled=true; }" UseSubmitBehavior="false" />
3
eqiz

Aspボタンに2つの属性を追加するだけです:

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

例えば.

<asp:Button ID="Button1" runat="server" Text="TEST" OnClientClick="this.disabled='true';"  UseSubmitBehavior="false" CssClass="button-content btnwidth" OnClick="ServerSideMethod_Click"  />

詳細については:

https://bytes.com/topic/asp-net/answers/918280-disable-button-click-prevent-multiple-postbacks

3
Sachin Karche
<asp:Button ID="btnSend" runat="server" Text="Submit"  OnClick="Button_Click"/>

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

これを行うには、クライアント側の onclick イベントを使用できます。

yourButton.Attributes.Add("onclick", "this.disabled=true;");
3

OnClickイベントでボタンを無効にしてから、AJAXコールバックイベントハンドラーで再度有効にします。jQueryでこれを行う方法は次のとおりです。

<script>
$(document).ready(function() {

    $('#buttonId').click(function() {
         $(this).attr('disabled', 'disabled');
         callAjax();
    });

});

function callAjax()
{
    $.ajax({
      url: 'ajax/test.html',
      success: function(data) {
         //enable button
         $('#buttonId').removeAttr('disabled');

      }
    });
}
</script>
2
rick schott

jQueryを使用:

$('form').submit(function(){
    $(':submit', this).click(function() {
        return false;
    });
});
1
mtntrailrunner

このソリューションは、asp.netバリデーターを使用している場合に機能します。

<script language="javascript" type="text/javascript">
function disableButton(sender,group)
{
    Page_ClientValidate(group);
    if (Page_IsValid)
    {
        sender.disabled = "disabled";
        __doPostBack(sender.name, '');
    }
}</script>

ボタンを変更します。

<asp:Button runat="server" ID="btnSendMessage" Text="Send" OnClick="btnSendMessage_OnClick" OnClientClick="disableButton(this,'theValidationGroup')" CausesValidation="true" ValidationGroup="theValidationGroup" />
1
Matteo Conta

ボタンを無効にしてポストバックを呼び出すのが好きです。この方法では、ボタンが無効になった後でもコードビハインドが実行されます。

これは、コードビハインドから添付する方法です。

btnProcess.Attributes.Add("onclick", " this.disabled = true; __doPostBack('btnProcess', ''); return false;")

次に、コードビハインドでボタンを再度有効にします。

btnProcess.Enabled = True
1
Taylor Brown

これを試して、それは私のために働いた

<asp:Button ID="button" runat="server" CssClass="normalButton" 
Text="Button"  OnClick="Button_Click" ClientIDMode="Static" 
OnClientClick="this.disabled = true; setTimeout('enableButton()', 1500);" 
UseSubmitBehavior="False"/>  

それから

<script type="text/javascript">
function enableButton() {
document.getElementById('button').disabled = false;
}
</script>

「setTimeout」で遅延時間を調整できます

1
formidablecoder

これは通常のhtmlボタンで機能します。

    <input id="Button1"
    onclick="this.disabled='true';" type="button"
    value="Submit" name="Button1"
    runat="server" onserverclick="Button1_Click">

ボタンは、ポストバックが完了するまで無効になり、ダブルクリックが防止されます。

0
FJT
<script type = "text/javascript">
function DisableButtons() {
    var inputs = document.getElementsByTagName("INPUT");
    for (var i in inputs) {
        if (inputs[i].type == "button" || inputs[i].type == "submit") {
            inputs[i].disabled = true;
        }
    }
}
window.onbeforeunload = DisableButtons;
</script>
0
Imad

Javascriptを使用してこれを行うことができます。 formタグで、onsubmit="javascript:this.getElementById("submitButton").disabled='true';"

0
steinberg