Change event not firing on textbox when data is changed through other code

Question

I need a change event to fire on an element without regard of how the element value was changed.

My use case here is that I need to change elements on a form whenever a particular textbox changes value. The problem is that the element is populated by another button (a calendar button that lets the user choose a date which is then inserted in the first textbox).

Using the sample below, I need to know when "date1" changes so I can update "date2". I won't know the ID of the button--its dynamically generated by another tool--so I can't attach anything to that.

I have the following HTML:

 <input type="text" id="date1" value="" />
 <input type="button" id="but1" value="click me" />
 <br/>
 <input type="text" id="date2" value="" />

And this JavaScript:

 $(function () {

     $("#but1").click(function () {
         $("#date1").val(new Date().toLocaleDateString());
     });

     $("#date1").change(function () {
         var d = new Date($("#date1").val());
         $("#date2").val(d.addDays(7));
     });

 });

 Date.prototype.addDays = function (days) {
     var current = this;
     current.setDate(current.getDate() + days);
     return current;
 };

Here is a jsfiddle I was using: http://jsfiddle.net/mYWJS/7/

Update: I added a DIV wrapper to the jsfiddle example in hopes that might inspire another solution. I couldn't find a way to utilize it myself but my JavaScript skills are rather mediocre.

In regards to Fabricio's comment about DOM mutations, is there a DOM mutation solution that is somewhat browser independent? There is no way for me to predict with certainty the browser that will be used here. I'm not too concerned about IE6, but the few solutions I've seen for DOM mutations seem to focus on Chrome.

change only fires for text inputs when the input loses focus after having its value changed after gaining focus. No focus = no change event. You can trigger a synthetic .change() event after changing it from your JS, but if you really need to watch over an input's value, you will need a DOM Mutation Observer which is mostly a hack. — Fabrício Matté
– Fabrício Matté, Commented Mar 14, 2013 at 22:48

Mark Schultheiss · Accepted Answer · 2013-03-15 16:08:24Z

1

Fire the event

$(function () {

    $("#but1").click(function () {
        $("#date1").val(new Date().toLocaleDateString()).change();
    });

    $("#date1").change(function () {
        var d = new Date($("#date1").val());
        $("#date2").val(d.addDays(7));
    });

});

Date.prototype.addDays = function (days) {
    var current = this;
    current.setDate(current.getDate() + days);
    return current;
};

Aleternate:

$("#date1").val(new Date().toLocaleDateString()).trigger('change');

EDIT: Given your clarification:

$(function () {
    $("#date1").next('input[type=button]').on('click',function () {
        $("#date1").val(new Date().toLocaleDateString()).change();
    });

    $("#date1").change(function () {
        var d = new Date($("#date1").val());
        $("#date2").val(d.addDays(7));
    });
});

Date.prototype.addDays = function (days) {
    var current = this;
    current.setDate(current.getDate() + days);
    return current;
};

NOTE: This example has them in the same table cell. If it is in a subsequent table cell use:

 $("#date1").next('td input[type=button]')

edited Mar 15, 2013 at 16:08

answered Mar 14, 2013 at 23:29

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sailing Judo Over a year ago

While this works it ignores the point I mentioned in my question that I don't really have access to the button. I won't know its name or ID. I need a solution that just looks at the text box.

Mark Schultheiss Over a year ago

SO, to clarify, you don't know the id of but1 input button? and if that is correct, do you know the id of its wrapper/containing element?

Sailing Judo Over a year ago

Its in a table cell which I can determine. I also know its immediately preceded by the 'date1' textbox.

Mark Schultheiss Over a year ago

In future questions, help us help you by providing full contextual markup and really clear explanation of your challenge.

Sailing Judo Over a year ago

You're right, but sometimes its hard to foresee what info is valuable to get an answer. I could probably provide a couple thousand lines of code to clearly define the issue, but I focused on what I felt I really needed... a way to always detect when the contents of a textbox changed.

|

Collectives™ on Stack Overflow

Change event not firing on textbox when data is changed through other code

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related