Clear two TextBoxes and checkBox using JavaScript on TextChanged or CheckedChanged events

Question

clear the other two controls if third controls value changes -- using Javascript

I have two textBoxes and a checkBox

txtExpiryDate--with ajaxCalenderExtender

txtDaysToExpire

chkExpired --checkbox

The issue that I cannot fix is, if the value in any of the above three controls is changed (on client side) the other two should be cleared..

Like if a date is selected in txtExpiryDate , values of other two controls should be cleared to: txtDaysToExpire.Text=""; and chkExpired.Checked = false .. and similarly if chkExpired.Checked = true , then other two should be cleared .. Hope it makes it clear to understand.. Please have a look at the mark-up

<td colspan="2" rowspan="2">
    <asp:UpdatePanel ID="upnlExpiry" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="txtExpiryDate" EventName="TextChanged" />
            <asp:AsyncPostBackTrigger ControlID="txtDaysToExpire" EventName="TextChanged" />
            <asp:AsyncPostBackTrigger ControlID="chkExpired" EventName="CheckedChanged" />
        </Triggers>
        <ContentTemplate>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="leftaligntxt">
                <tr>
                    <td width="44%" align="left">
                        Expiry Date
                    </td>
                    <td colspan="2">
                        <asp:TextBox ID="txtExpiryDate" runat="server"  OnTextChanged="txtExpiryDate_TextChanged"></asp:TextBox>
                        <ajaxToolkit:CalendarExtender ID="calExtExpiryDate" runat="server" Format="dd/MM/yyyy"
                            PopupButtonID="imgBtnCal" TargetControlID="txtExpiryDate">
                        </ajaxToolkit:CalendarExtender>
                        <asp:ImageButton ID="imgBtnCal" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/App_Themes/FQBlue/img/Calendar_img.png" />
                    </td>
                </tr>
                <tr>
                    <td width="44%">
                        Days to Expire
                    </td>
                    <td valign="top">
                        <asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" OnTextChanged="txtDaysToExpire_TextChanged"
                            ></asp:TextBox>
                        <ajaxToolkit:NumericUpDownExtender ID="txtDaysToExpire_NumericUpDownExtender" runat="server"
                            Maximum="15000" Minimum="0" TargetControlID="txtDaysToExpire" Width="100">
                        </ajaxToolkit:NumericUpDownExtender>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkExpired" runat="server" Text="Show Expired" AutoPostBack="True"
                            OnCheckedChanged="chkExpired_CheckedChanged" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td colspan="2">
                        &nbsp;
                    </td>
                </tr>
            </table>
        </ContentTemplate>
    </asp:UpdatePanel>
</td>

Answer 1

If not using the AutoPostBack:

<asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" onchange="tValue(this)">   </asp:TextBox>
<asp:TextBox ID="txtTest" runat="server" Text="blah blah blah" />
<asp:CheckBox ID="CheckBox1" runat="server" />

 <script type="text/javascript">
  function tValue(txt)
  {
    document.getElementById('<%= txtTest.ClientID %>').value = "";
    document.getElementById('<%= CheckBox1.ClientID %>').checked = false;
  }
 </script>

Answer 2

As mentioned by @Ashwini you can do the same thing for the others:

<asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" onchange="DaysToExpireChanged(this)">   </asp:TextBox>
<asp:TextBox ID="txtExpiryDate" runat="server" Text="blah blah blah" onchange="ExpiryDateChanged(this)" />
<asp:CheckBox ID="chkExpired" runat="server" onchange="ExpiredChanged" />

 <script type="text/javascript">
  function DaysToExpireChanged(txt)
  {
    document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
    document.getElementById('<%= chkExpired.ClientID %>').checked = false;
  }

  function ExpiryDateChanged(txt)
  {
    document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
    document.getElementById('<%= chkExpired.ClientID %>').checked = false;
  }

  function ExpiredChanged(txt)
  {
    document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
    document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
  }
 </script>

Or you can improve the logic to do just one function that process every changes.

Answer 3

@Ashwini Your code with the following code worked fine for me..
because it was that all the three should clear other two and checkbox was not working the way I needed with above code..so had to go other way round.. Anyways following code worked fine for me..
Now it clears both of the not selected ( among the three controls)

Thank-you once again..!

     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".checkCss").blur(function () {
            $(".checkCssChk input").attr("checked", false);
            $(".checkCss").not(this).val("");
        });
        $(".checkCssChk input").change(function () {
            $(".checkCss").not(this).val("");
        })
    });
</script>
    <asp:TextBox ID="txtExpiryDate" runat="server" CssClass="checkCss" onchange="tValue(this)"></asp:TextBox>
    <asp:TextBox ID="txtDaysToExpire" runat="server" Width="80px" CssClass="checkCss" onchange="t2Value(this)"> ></asp:TextBox>
    <asp:CheckBox ID="chkExpired" runat="server" Text="Show Expired" CssClass="checkCssChk" />
    <script type="text/javascript">
        function tValue(txt) {
            document.getElementById('<%= txtDaysToExpire.ClientID %>').value = "";
            document.getElementById('<%= chkExpired.ClientID %>').checked = false;
        }
        function t2Value(txt) {
            document.getElementById('<%= txtExpiryDate.ClientID %>').value = "";
            document.getElementById('<%= chkExpired.ClientID %>').checked = false;
        }
     </script>