按鈕重設問題引發的思考 — JQuery & Ajax

問題：

      有關於重設的話題

      在Html中有一個type="reset"的Button,它的作用的頁面元素的狀態或值。

      不過在以下情況下，它的作用好像失效了。

      情境技術：ajax & jquery & type="reset"

Page:

<asp:TextBox ID="txtBox" runat="server" ></asp:TextBox>

<input id="reset" type="reset" class="SignedBtn" />

Script:

<script type="text/javascript" language="javascript">

         $("#reset").click(function() {

               //Reset TextBox
               var entryArr = [txtBox, txtBox1, txtBox2];
               $.each(entryArr, function() {
                   this.val("");
               });

           });

</script>

以上代碼是常規清空TextBox所寫的code

當我們在Page加上AJAX：UpdatePanel

Page

<ajax:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

<asp:TextBox ID="txtBox" runat="server" ></asp:TextBox>

<input id="reset" type="reset" class="SignedBtn" />

      </ContentTemplate>
</ajax:UpdatePanel>

Script:

<script type="text/javascript" language="javascript">

         $("#reset").click(function() {

               //Reset TextBox
               var entryArr = [txtBox, txtBox1, txtBox2];
               $.each(entryArr, function() {
                   this.val("");
               });

           });

</script>

以上藍色代碼塊，基本上只有第一次執行時是有效。但是updatePanel發生postback或者什麼時，再次點擊重設按鈕都是失效狀態。

主要原因可以參考：

http://www.cnblogs.com/blodfox777/archive/2008/12/08/1347805.html

解決方案：

<script type="text/javascript" language="javascript">
    function pageLoad(sender, args) {

   $("#reset").click(function() {

               //Reset TextBox
               var entryArr = [txtBox, txtBox1, txtBox2];
               $.each(entryArr, function() {
                   this.val("");
               });

           });

｝

</script>

但是針對以上案例,頁面的重設功能還是無效。

看以下

圖1：點擊重設之時

圖2：點擊“確定”之後

為什嗎？這是為什嗎？

為什麼TextBox中的值又被回寫到TextBox中了？

原因：我分析也許是type="reset“，UpdatePanel的問題，具體原因說不太清楚？

解決方案：採用常規的按鈕

Page

<ajax:UpdatePanel ID="up" runat="server" UpdateMode="Conditional">
    <ContentTemplate>

<asp:TextBox ID="txtBox" runat="server" ></asp:TextBox>

<asp:Button ID="btnCancel" runat="server" Text="重設" CssClass="SignedBtn" />

<%--<input id="reset" type="reset" class="SignedBtn" />--%>

      </ContentTemplate>
</ajax:UpdatePanel>

Script:

<script type="text/javascript" language="javascript">

    function pageLoad(sender, args) { 

          $("#<%=btnCancel.ClientID %>").click(function() {

               //Reset TextBox
               var entryArr = [txtBox, txtBox1, txtBox2];
               $.each(entryArr, function() {
                   this.val("");
               });

           });

｝

</script>

 

參考：http://forums.asp.net/p/1448643/3300979.aspx