使用jQuery禁用按鈕，同時仍然發射服務器端事件

我知道類似的問題之前已經發布，但我沒有看到一個與下面的一些要求。使用jQuery禁用按鈕，同時仍然發射服務器端事件

在我的標記中，我有一個包含輸入字段和ASP.NET按鈕的div。該按鈕有一個服務器端的OnClick事件處理程序，它會執行一些其他操作。工作。

這裏的標記：

<div id="contactForm"> 
    <input type="text" id="email" runat="server" class="email" name="Email" placeholder="Email *" /> 
    <asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" /> 
</div>

和事件處理程序：

protected void Submit_Click(object sender, EventArgs e) 
{    
    if (Page.IsValid) 
    { 
     EmailPost(); 
     //Do other stuff 
    } 
}

我還想以下：

禁用鍵4秒
變化按鈕文本禁用
還原按鈕文本它重新啓用後
檢查驗證

這是我的腳本來處理：

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

    var fewSeconds = 4; 
    $(".submit-btn").click(function() { 
     if (Page_ClientValidate()) { 
      var btn = $(this); 
      btn.prop('disabled', true); 
      setTimeout(function() { 
       btn.prop('disabled', false); 
       btn.prop('value', 'Request Information'); 
      }, fewSeconds * 1000); 

      btn.prop('value', 'Sending...'); 
     } 
    }); 

}); 
</script>

這一切工作正常，除了禁用按鈕阻止我服務器端事件發生。所以，我添加UseSubmitBehavior =「假」給我的按鈕：

<asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" UseSubmitBehavior="false" />

現在，服務器端事件觸發正常，但代碼中的腳本內（即，禁用按鈕，切換按鈕上的文字）只在第一次點擊按鈕時運行..

任何想法如何使腳本代碼運行更多一次？

來源

2017-07-02 mustang888

你不提交表單所以JavaScript代碼是無用的，因爲只要在頁面提交所有的代碼停止運行。 – epascarello

嘗試在您的服務器端代碼中使用腳本管理器 –

@epascarello好點！我已經用'pageLoad（）'函數替換了'$（document）.ready'，它現在似乎正在工作。感謝您指點我在正確的方向:) – mustang888

<script> 
jQuery(document).ready(function ButtonDisable($) { 
    var fewSeconds = 4; 
     if (Page_ClientValidate()) { 
      var btn = $(this); 
      btn.prop('disabled', true); 
      setTimeout(function() { 
       btn.prop('disabled', false); 
       btn.prop('value', 'Request Information'); 
      }, fewSeconds * 1000); 

      btn.prop('value', 'Sending...'); 
     } 
}); 
</script>

在服務器端代碼中調用這個javascript函數

使用的ScriptManager

protected void Submit_Click(object sender, EventArgs e) 
{    
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ButtonDisable", "ButtonDisable()", false); 
    if (Page.IsValid) 
    { 
     EmailPost(); 
     //Do other stuff 
    } 
}

如果不工作，你可以在你的服務器端代碼字符串生成器，使用

來源

2017-07-02 16:00:32

感謝您的建議，但沒有奏效..當頁面加載時，它會自動觸發窗體和驗證，所以默認顯示驗證錯誤消息。 – mustang888

否則，你可以在你的按鈕點擊使用字符串生成器 –

是的，這是一個選項，但我已經用函數pageLoad（）替換了'$（document）.ready'，並且做到了。謝謝。 – mustang888

@epascarello指着我在正確的方向;我切換$(document).ready與function pageLoad()並做到了：

<script> 
    function pageLoad(){ 
     var fewSeconds = 4; 
     $(".submit-btn").click(function() { 
      if (Page_ClientValidate()) { 
       var btn = $(this); 
       btn.prop('disabled', true); 
       setTimeout(function() { 
        btn.prop('disabled', false); 
        btn.prop('value', 'Hmm.. Try again'); 
       }, fewSeconds * 1000); 

       btn.prop('value', 'Sending...'); 
      } 
     }); 

    }; 
</script>

來源

2017-07-02 16:34:04 mustang888

使用jQuery禁用按鈕，同時仍然發射服務器端事件

回答

相關問題