按钮重置问题引发的思考 --- 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