Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript manually firing .onchange() event

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

like image 656
Mircea Avatar asked Oct 22 '10 12:10

Mircea


People also ask

How can I trigger an Onchange event manually JavaScript?

document. querySelector('#test'). addEventListener('change', () => console.

How do I dispatch Onchange event?

Use the dispatchEvent Method querySelector('input'); element. addEventListener('change', () => console. log('change')) const event = new Event('change'); element. dispatchEvent(event);

How do you trigger a change event?

Like an Apex trigger for Salesforce objects, you define a change event trigger on the change event corresponding to the Salesforce object. Only after insert triggers are supported. Define a change event trigger with the after insert keyword on the change event using this format.


4 Answers

Try using fireEvent or dispatchEvent (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);
}
like image 182
GôTô Avatar answered Oct 07 '22 13:10

GôTô


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.

like image 21
bobince Avatar answered Oct 07 '22 14:10

bobince


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?
like image 39
SquidScareMe Avatar answered Oct 07 '22 12:10

SquidScareMe


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

like image 43
Yakimych Avatar answered Oct 07 '22 13:10

Yakimych