onchange event not fire when the change come from another function

Question

I have a input text that get his value from a Javascript function (a timer with countdown).

I want to raise an event when the input text is 0 ,so i am using the change eventListener.

Unfortunately it doesn't seem to raise the event when the change is coming from javascript function.

How can I force the change event to work, even if the change is coming from Javascript and not from the user?

Answer 1

From the fine manual:

change
The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This event is valid for INPUT, SELECT, and TEXTAREA. element.

When you modify the text input's value through code, the change event will not be fired because there is no focus change. You can trigger the event yourself though with createEvent and dispatchEvent, for example:

el = document.getElementById('x');
ev = document.createEvent('Event');
ev.initEvent('change', true, false);
el.dispatchEvent(ev);

And a live version: http://jsfiddle.net/ambiguous/nH8CH/

Answer 2

In the function that changes the value, manually fire a change event.

var e = document.createEvent('HTMLEvents');
e.initEvent('change', false, false);
some_input_element.dispatchEvent(e);

Answer 3

it's 2018 now and seems that initEvent() is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent

i think you can trigger the event in a one-liner now: element.dispatchEvent(new Event('change'));

Answer 4

A more reusable option :

function simulate_event(eventName, element) {
    // You could set this into the prototype as a method.
    var event;

    if (document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventName, true, true);
    } else {
        event = document.createEventObject();
        event.eventType = eventName;
    };

    event.eventName = eventName;

    if (document.createEvent) {
        element.dispatchEvent(event);
    } else {
        element.fireEvent("on" + event.eventName, event);
    }
};