Javascript manually firing .onchange() event

Question

I have an input field I want to assign a new value and fire an .onchange() event. I did the following:

document.getElementById("range").value='500';
document.getElementById("range").onchange();

Where range is my input Id. I get the following error:

Uncaught TypeError: Cannot read property 'target' of undefined

Is there a way to define the 'target'? Thank you

Answer 1

Try using fireEvent or dispatcEvent (depending on browser) to raise the event:

document.getElementById("range").value='500';
if (document.getElementById("range").fireEvent) {
    document.getElementById("range").fireEvent("onclick");
} else if (document.getElementById("range").dispatchEvent) {
    var clickevent=document.createEvent("MouseEvents");
    clickevent.initEvent("click", true, true);
    document.getElementById("range").dispatchEvent(clickevent);
}

Answer 2

This seems to work for me (see this fiddle). Do you have any other code that may be the problem? How did you define your onchange handler?

Are you calling e.target in your onchange handler? I suspect this may be the issue... since you are doing the change programmatically, there is no corresponding window event.

Answer 3

from : http://www.mail-archive.com/[email protected]/msg44887.html

Sometimes it's needed to create an event programmatically. (Which is different from running an event function (triggering)

This can be done by the following fire code

> var el=document.getElementById("ID1")
> 
> fire(el,'change')
> 
> 
>    function fire(evttype) {
>        if (document.createEvent) {
>          var evt = document.createEvent('HTMLEvents');
>          evt.initEvent( evttype, false, false);
>          el.dispatchEvent(evt);
>        } else if (document.createEventObject) {
>          el.fireEvent('on' + evttype);
>        }    } looks like this trick is not yet in jQuery, perhaps for a
> reason?

Answer 4

Generally, your code should work fine. There might be something else that's issuing the problem, though.

• Where do you run those two lines?
• Are you sure that the element with the range id is loaded by the time you run the code (e.g. you run it in document.ready).
• Are you sure that you only have one element with id range on the page?
• What is your onchange() function doing (could be helpful to post it here)?

Apart from that, I would recommend using jQuery (if possible):

$('#range').trigger('change');

or just

$('#range').change();

http://api.jquery.com/change/

But as I mentioned, your case should work fine too: http://jehiah.cz/a/firing-javascript-events-properly

Answer 5

The error about target is because there's code in the event handler that's trying to read the target property of the Event object associated with the change event. You could try passing in an faux-Event to fool it:

var range= document.getElementById('range');
range.onchange({target: range});

or, if you can, change the handler code to use this instead of event.target. Unless you are using delegation (catching change events on child object from a parent, something that is troublesome for change events because IE doesn't ‘bubble’ them), the target of the change event is always going to be the element the event handler was registered on, making event.target redundant.

If the event handler uses more properties of Event than just target you would need to fake more, or go for the ‘real’ browser interface to dispatching events. This will also be necessary if event listeners might be in use (addEventListener, or attachEvent in IE) as they won't be visible on the direct onchange property. This is browser-dependent (fireEvent for IE, dispatchEvent for standards) and not available on older or more obscure browsers.