onchange event not fire when the change come from another function

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'));


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/


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);