Jquery on change function not working with asp.net-CodePudding

I have tried with the following code with live, change function. but not working

live function is given below,

$(function () {
            $('#txt_ToDate').live('change', function (e) {
            alert("hai");
            var txt_FromDate = document.getElementById('txt_FromDate');
            var txt_ToDate = document.getElementById('txt_ToDate');
            txt_ToDate.value = txt_FromDate.value;
        });
        });

Change function is given below.

$(function () {
            $('#txt_ToDate').change(function () {
            alert("hai");
            var txt_FromDate = document.getElementById('txt_FromDate');
            var txt_ToDate = document.getElementById('txt_ToDate');
            txt_ToDate.value = txt_FromDate.value;
        });

but not hitting alert. how to fix this issue.

html code is given below,

<td style="text-align: left;" >
                                                <asp:TextBox ID="txt_FromDate" runat="server"  Width="105px"
                                                    onfocus="showCalendarControl(this);" onkeypress="return false;" onpaste="return false;"
                                                    CssClass="inputCalendar2_font14"></asp:TextBox>
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                              <asp:TextBox ID="txt_ToDate" runat="server"  Width="105px" OnTextChanged="txt_ToDate_TextChanged"
                                                  onfocus="showCalendarControl(this);" onkeypress="return false;" onpaste="return false;"
                                                  CssClass="inputCalendar2_font14"></asp:TextBox>

                                            </td>

Reference is given below,

<script src="../jScript/BrowserCompatibility.js" type="text/javascript"></script>
    <script src="../jScript/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="../calenderCtr/CalendarControl.js" type="text/javascript" language="javascript"></script>
    <link href="../calenderCtr/CalendarControl.css" rel="stylesheet" type="text/css" />
    <script src="../jScript/Validator.js" type="text/javascript" language="javascript"></script>
    <link href="../style/dsi_mig.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

CodePudding user response：

Instead of .change function, Use .on('change') like this:

    $(function () {
        $('#txt_ToDate').on('change', function () {
        alert("hai");
        var txt_FromDate = document.getElementById('txt_FromDate');
        var txt_ToDate = document.getElementById('txt_ToDate');
        txt_ToDate.value = txt_FromDate.value;
    });

the usage of on change in jquery is different in different versions.

CodePudding user response：

When asp.net renders the asp:TextBox you may not have the txt_ToDate as id.

To get the rendered ID on page you must use the ClientID as

$(function () {
            $('#<%=txt_ToDate.ClientID%>').change(function () {
            alert("hai");
            var txt_FromDate = document.getElementById('txt_FromDate');
            var txt_ToDate = document.getElementById('txt_ToDate');
            txt_ToDate.value = txt_FromDate.value;
        });

this is the main change $('#<%=txt_ToDate.ClientID%>')

You can also read this answer: Accessing control client name and not ID in ASP.NET