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?
We can use the dispatchEvent method on an element to trigger an event programmatically. We can write: const element = document. querySelector('input'); element.
The onchange attribute fires the moment when the value of the element is changed. Tip: This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus.
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");
MDN suggests that there's a much cleaner way of doing this in modern browsers:
// Assuming we're listening for e.g. a 'change' event on `element` // Create a new 'change' event var event = new Event('change'); // Dispatch it. element.dispatchEvent(event);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With