jquery text change event is not fired in chrome

Question

I already tried to put the jQuery change event inside document.ready but with no luck. The change event is working in Firefox and IE, but not in Chrome. Even alert box is not appearing while changing the values in ctl00_ContentPlaceHolder1_Txt_RegNo Textbox.

But when I type in textbox and remove the value using backspace from textbox then it's working in chrome. It should work at first time while changing the values in textbox in chrome.

Script:

$("#ctl00_ContentPlaceHolder1_Txt_RegNo").change(function () {
    alert("done");
    var regno = $("#<%= Txt_RegNo.ClientID %>").val();
    var fleetno = $("#<%= Txt_FleetNo.ClientID %>");
    var customername = $("#<%= txtCustomerName.ClientID %>");
    var ridername = $("#<%= txtRiderName.ClientID %>");
    var phoneno = $("#<%= txtPhoneNo.ClientID %>");
    var email = $("#<%= txtEmail.ClientID %>");
    var chassis = $("#<%= txtchassis.ClientID %>");
    var ddlmodel = $("#<%= ddl_Model.ClientID %>");
    var ddltype = $("#<%= ddl_type.ClientID %>");
    var ddlcolor = $("#<%= ddl_color.ClientID %>");
    var ddl_year = $("#<%= ddlyear.ClientID %>");
    var KMS = $("#<%= txtKMSRUN.ClientID %>");
    var ddladvisor = $("#<%= ddl_ServiceAdvisor.ClientID %>");
    var expirydate = $("#<%= txtexpirydate.ClientID %>");
    var notes = $("#<%= txtnotes.ClientID %>");
    var data = { REGNO: regno };
    var jsonData = JSON.stringify(data); $.ajax({
        type: "POST",
        url: "JobCard.aspx/Populate_Reg",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            if (data.d.length > 0) {
                var e;
                for (var i = 0; i < data.d.length; i++) {
                    fleetno.val(data.d[i].FleetNO);
                    customername.val(data.d[i].CUSTOMER_NAME);
                    ridername.val(data.d[i].RIDERNAME);
                    phoneno.val(data.d[i].PHONENO);
                    email.val(data.d[i].EMAIL);
                    chassis.val(data.d[i].CHASSISNO);
                    ddlmodel.val(data.d[i].MAKE);
                    ddltype.val(data.d[i].MODEL);
                    ddlcolor.val(data.d[i].color);
                    ddl_year.val(data.d[i].Year);
                    KMS.val(data.d[i].KMSRUN);
                    ddladvisor.val(data.d[i].ADVISORID);
                    expirydate.val(data.d[i].EXPIRYDATE);
                    notes.val(data.d[i].NOTES);
                    e = expirydate.val()
                }

                var d1 = Date.parse(e);
                var dt = new Date(d1);
                var dateExpiry = dt.getMonth() + 1 + "/" + dt.getDate() + "/" + dt.getFullYear();
                var d = new Date; var datenow = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear();

                if (dateExpiry <= datenow) {
                    checkRegNo()
                }
            }
        })
    });
});

VPK · Answer 1 · 2014-09-10T15:10:26.437

0

Try using the keypress event of jquery like this,

$("#ctl00_ContentPlaceHolder1_Txt_RegNo").keypress(function () {
    //your method body
)};

If you want to get the value of the textbox once the user finished typing, then you can use the blur event. This event will be called once the text box loses the focus.

edited Sep 10 '14 at 15:10

answered Sep 10 '14 at 14:44

VPK

3,010
1
28
35

thanks but there is an autocomplete attached with textbox so that keypress event is not appropriate here – Siddiq Baig Sep 10 '14 at 15:05

score 0 · Accepted Answer · answered Sep 10 '14 at 15:09

0

instead change and keypress event i used focusout event of jquery and it`s working fine according to my requirement

$("#ctl00_ContentPlaceHolder1_Txt_RegNo").focusout(function () {
    //your method body
)};

answered Sep 10 '14 at 15:09

Siddiq Baig

586
2
17
37

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling). – VPK Sep 10 '14 at 15:13

score 0 · Answer 3 · edited May 23 '17 at 12:00

As written here, you can use monitorEvents JavaScript function to show all events triggered on an element.

monitorEvents($('#ctl00_ContentPlaceHolder1_Txt_RegNo')[0]);

In Chrome, you will discover, that only the input event is triggered at the moment of atocomplete.

The input event does not work in all browsers, so if you combine it with the change event, it should work in most browsers.

$('#ctl00_ContentPlaceHolder1_Txt_RegNo').on('change input', function() {
    // Handle event
)};

jquery text change event is not fired in chrome

3 Answers3