How can I trigger an onchange event manually?
dom-events, event-handling, javascript
Solution
There's a couple of ways you can do this. If the `onchange` listener is a function set via the `element.onchange` property and you're not bothered about the event object or bubbling/propagation, the easiest method is to just call that function:
element.onchange();
If you need it to simulate the real event in full, or if you set the event via the HTML attribute or `addEventListener`/`attachEvent`, you need to do a bit of feature detection to correctly fire the event:
if ("createEvent" in document) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
else
element.fireEvent("onchange");
Problem
I'm setting a date-time textfield value via a calendar widget. Obviously, the calendar widget does something like this : ``` document.getElementById('datetimetext').value = date_value; ``` What I want is: On changing value in the date-time textfield I need to reset some other fields in the page. I've added a `onchange` event listener to the `datetimetext` field which is not getting triggered, because I guess `onchange` gets triggered only when the element gets focus & its value is changed on losing focus. Hence I'm looking for a way to manually trigger this `onchange` event (which I guess should take care of checking the value difference in the text field). Any ideas?