How can I trigger an onchange event manually? [duplicate]

  1. Home
  2. javascript
  3. How can I trigger an onchange event manually? [duplicate]

This question already has an answer here:

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 ?

First answer

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

Second answer

For those using jQuery there’s a convenient method: http://api.jquery.com/change/

Third answer

Reprint:https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually
Spread the love

Related articles

Comments are closed.