Create onchange event with javascript in Firefox

Question

I've been working on trying to trigger an onchange listener with java script in Mozilla Firefox. I've found a lot on Stack Overflow posted about this, but nothing seems to be working for my unique case.

I've created this HTML with a onchange listener from an onchange event using this helpful post (JavaScript OnChange Listener position in HTML markup). Here's my code:

<HTML>
<head>
<script type="text/javascript">
window.onload= function () {
    if(window.addEventListener) {
        document.getElementsByClassName('search-box')[0].addEventListener('change', loadXMLDoc, false);
    } else if (window.attachEvent){
        document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);
    }

    function loadXMLDoc(){
       alert('It worked');
    }
}

function addTextCallListener() {
var searchBox = document.getElementsByClassName("search-box")[0];
searchBox.value = "Hello";
}
</script>
</head>
<BODY>
<input type="text" class="search-box" placeholder="Player Search">
<br \>
<button type="button" onclick="addTextCallListener()">Click Me!</button>
</BODY>
</HTML>

I also saved it as this jsfiddle (for some reason I had to keep it all together for it to work, I couldn't break it up into js and html).
https://jsfiddle.net/josephfedor42/crogL0zd/1/

If you play with this jsfiddle you can see that entering text and pressing enter will trigger the listener and the pop up with the message “It worked” will appear.

But if the button “Click Me!” is pressed it only changes the value of the text box, and the onchange listener is not called.

I realize I could easily add an onchange event to this button. But I want to to trigger the listener by programatically/ superficially using javascript in my addTextCallListener() function.

I've tried the simple stuff, like calling searchBox.onchange(); searchBox.focus(); searchBox.click();

And a combination of these to add and remove the focus. But it doesn't seem to work. I've found quite a few posts on triggering an onchange event, but nothing that works in Firefox.

Any help would be appreciated.

Thanks for that link of a possible duplicated question. I had checked out that link before.
But I gave it a try again. I saved the jsfiddle from them both and neither one work.

My implementation of Dorian's answer https://jsfiddle.net/josephfedor42/zaakd3dj/

My implementation of Alsciende's answer https://jsfiddle.net/josephfedor42/xhs6L6u2/

possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) — J Santosh, Sep 05 '15 at 17:53
Also, I'm looking for a JavaScript only answer. Thanks again. — Joe, Sep 06 '15 at 01:14
I am wondering if your question couldn't be trimmed to "Why setting `input.value` doesn't trigger the `change` event in Firefox?" with a small example code, but I'm not sure it is what you want either, so I won't do the edit for you, but please... try to clarify. — Kaiido, Sep 06 '15 at 03:28
I'm not really interested in why it doesn't trigger the change event. I want to create the event so the code does what I want. — Joe, Sep 06 '15 at 03:44
hmm bad behavior on your side then... You should try to understand why it doesn't work in order to make it work. But then @TomSardy's answer gives you a way to trigger the event, even if you shouldn't do it. My comment on my own answer gives you a proper way to achieve what you want : https://jsfiddle.net/crogL0zd/5/ — Kaiido, Sep 06 '15 at 03:49
I don't want to get in a contest of words over which ways are more ethical than others. I do realize I could easily add an `onclick=` event and make this work. What I am interested in is finding a different way of doing it. A way where I trigger the onchange event using JavaScript. — Joe, Sep 06 '15 at 04:01
Down-voters: I do realize I'm trying to solve a very standard problem, in a very non-conventional way. But that is my intent. I want to see if it can be done this way. — Joe, Sep 07 '15 at 12:57

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

^{emphasize mine}
According to the mdn page about the change event,

The change event is fired for <input>, <select>, and <textarea> elements when a change to the element's value is committed by the user.

and to whatwg specs :

When the input and change events apply (which is the case for all input controls other than buttons and those with the type attribute in the Hidden state), the events are fired to indicate that the user has interacted with the control.

Therefore, setting the value of an input is not an action "committed by the user" nor a sign that "the user has interacted with the control", since it was made by the code.

So, even if the specifications for this event are kind of unclear, the event should not fire when you change its value by code.

edited May 23 '17 at 11:51

Community

1
1

answered Sep 06 '15 at 03:10

Kaiido

123,334
13
219
285

So the best practice in your case is just to call the callback you attached to the event inside the `addTextCallListener` function – Kaiido Sep 06 '15 at 03:17
I agree that an onchange event should not fire when I change the value of the textbox. But I want to call the onchange event and do it through JavaScript. Other user events can be called through JavaScript such as `.click()` which simulates a user clicking on an item on the screen. – Joe Sep 06 '15 at 03:55
@Joe https://jsfiddle.net/crogL0zd/5/ or if you really want to do something bad : https://jsfiddle.net/crogL0zd/6/ – Kaiido Sep 06 '15 at 04:00
That is some really good info on the change event. Thanks Kaiido – Joe Sep 07 '15 at 15:34

score 0 · Answer 2 · answered Sep 06 '15 at 01:23

0

Something like this should work:

function addTextCallListener() {
    var searchBox = document.getElementsByClassName("search-box")[0];
    searchBox.value = "Hello";

    //fire the event
    if (document.createEvent) {
        searchBox.dispatchEvent('change');
    } else {
        searchBox.fireEvent("onchange");
    }
}

answered Sep 06 '15 at 01:23

Tomas Ramirez Sarduy

17,294
8
69
85

I'm not sure it's a good idea to fire an already existing event outside of the standards – Kaiido Sep 06 '15 at 03:17
@Kaiido: Me neither, that's why the OP question has `-1`. This is just another solution – Tomas Ramirez Sarduy Sep 06 '15 at 03:19
Hmm I'm wondering if we shouldn't edit the question with only "why setting `input.value` doesn't trigger the `change` event?" – Kaiido Sep 06 '15 at 03:21
Thanks for your suggestion Tom. Unfortunately it doesn't work. I updated my jsfiddle with your code: https://jsfiddle.net/josephfedor42/crogL0zd/4/ – Joe Sep 06 '15 at 03:50

score 0 · Accepted Answer · answered Sep 15 '15 at 14:44

Here is the code I needed to add to my function addTextCallListener:

var evObj = document.createEvent('HTMLEvents');
evObj.initEvent( 'change', true, true );
searchBox.dispatchEvent(evObj);

I updated the jsfiddle. The working code is here https://jsfiddle.net/josephfedor42/crogL0zd/7/

score -1 · Answer 4 · edited Sep 06 '15 at 00:06

-1

Replace onchange with change in this part:

document.getElementsByClassName('search-box')[0].attachEvent("onchange", loadXMLDoc);

edited Sep 06 '15 at 00:06

spenibus

4,339
11
26
35

answered Sep 05 '15 at 18:25

NaveenG

292
3
11

Thanks for posting this. That was a typo. I tried changing both to "onchange" and the listener wouldn't even work at all. "change" is the right one. That's one piece to this hpuzzle... – Joe Sep 06 '15 at 01:11
Firefox doesn't know the attachEvent method – Kaiido Sep 06 '15 at 03:15

Create onchange event with javascript in Firefox

4 Answers4