How to programmatically force an onchange event on input?

Question

How to programmatically force an onchange event on input?

I tried something like this:

var code = ele.getAttribute('onchange'); eval(code); 

But my ultimate goal is to run any listener functions, and that doesn't seem to work. Also, the value attribute is not updated.

Answer 1

ugh does not use eval for anything. Well, there are certain things, but they are extremely rare. Rather, you would do this:

 document.getElementById("test").onchange() 

Check here for more options: http://jehiah.cz/archive/firing-javascript-events-properly

Answer 2

In jQuery, I mainly use:

 $("#element").trigger("change"); 

Answer 3

Create an Event object and pass it to the element's dispatchEvent method:

 var element = document.getElementById('just_an_example'); var event = new Event('change'); element.dispatchEvent(event); 

This will call event listeners, regardless of whether they were registered by calling the addEventListener method or setting the onchange property of this element.

---

If you want the event to bubble, pass the second argument to the Event constructor:

 var event = new Event('change', { bubbles: true }); 

---

Browser Compatibility Information:

• dispatchEvent ()
• Event()

Answer 4

For some reason, ele.onchange () throws a “method not found” for me in IE on my page, so I used this function from the Kolten link provided and called fireEvent (ele, 'change'), which worked:

 function fireEvent(element,event){ if (document.createEventObject){ // dispatch for IE var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // dispatch for firefox + others var evt = document.createEvent("HTMLEvents"); evt.initEvent(event, true, true ); // event type,bubbling,cancelable return !element.dispatchEvent(evt); } } 

However, I created a test page that confirmed that the call should work onchange ():

 <input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/> <input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/> 

Edit: the reason ele.onchange () is not working was because I actually did not declare anything for the onchange event. But fireEvent still works.

Answer 5

Taken from below QUnit

 function triggerEvent( elem, type, event ) { if ( $.browser.mozilla || $.browser.opera ) { event = document.createEvent("MouseEvents"); event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); elem.dispatchEvent( event ); } else if ( $.browser.msie ) { elem.fireEvent("on"+type); } } 

You can, of course, replace the $ .browser stuff with your own browser detection methods to make it independent of jQuery.

To use this function:

 var event; triggerEvent(ele, "change", event); 

Basically this will lead to a real DOM event, as if something had really changed.

Answer 6

With jQuery you can do the following:

 // for the element which uses ID $("#id").trigger("change"); // for the element which uses class name $(".class_name").trigger("change"); 

Answer 7

If you use jQuery, you will have:

 $('#elementId').change(function() { alert('Do Stuff'); }); 

or MS AJAX:

 $addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); }); 

Or in a raw HTML element:

 <input type="text" onchange="alert('Do Stuff');" id="myElement" /> 

After re-reading the question, I think I missed a reading of what was supposed to be done. I have never found a way to update the DOM element in a way that will cause a change event, what you are best doing is to have a separate event handler method, for example:

 $addHandler($get('elementId'), 'change', elementChanged); function elementChanged(){ alert('Do Stuff!'); } function editElement(){ var el = $get('elementId'); el.value = 'something new'; elementChanged(); } 

Since you are already writing a JavaScript method that will change it only 1 extra line to call.

Or, if you use the Microsoft AJAX framework, you can access all event handlers through:

 $get('elementId')._events 

This will allow you to perform some reflection-style actions to find the appropriate event handler to trigger.