Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 616
CodeTweetie Avatar asked May 18 '10 10:05

CodeTweetie


People also ask

How do you programmatically trigger change events?

We can use the dispatchEvent method on an element to trigger an event programmatically. We can write: const element = document. querySelector('input'); element.

How is Onchange triggered?

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.


2 Answers

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"); 
like image 111
Andy E Avatar answered Oct 05 '22 18:10

Andy E


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); 
like image 40
Milan Iliev Avatar answered Oct 05 '22 16:10

Milan Iliev