Onchange event is not working well

javascript html events onchange

15,562

Programmatically changing the value doesn't fire a change event, that only occurs if the user focuses the element, changes the value and then puts focus elsewhere.

Options are to manually call the onchange listener, dispatch a change event on the element, or manually bubble the change event by going up the DOM looking for parents with an onchange listener and calling them.

Here is an answer that seems to fit the bill: trigger onchange event manually

Some links:

MDN dispatchEvent (standards compliant): https://developer.mozilla.org/en/DOM/element.dispatchEvent
MSDN fireEvent (IE proprietary): http://msdn.microsoft.com/en-us/library/ie/ms536423(v=vs.85).aspx

15,562

Author by

zanhtet

Updated on June 04, 2022

Comments

zanhtet almost 2 years
I created a following html page.
```
<html>
    <head></head>
    <body>
        <input type="text" value="" id="Textbox" onchange="alert('text change');" />
        <input type="button" value="" onclick="document.getElementById('Textbox').value = 'Hello';" />
    </body>
</html>
```
When the entered text is inputted into the textbox, the onchange event is working well. I wrote a code that when the button is clicked, the 'Hello' text is inputted into the the textbox. But the onchange event of the textbox is not working well. How can I catch change event? Thanks.
RobG almost 12 years

Your answer misses the point and there is no jQuery tag on the question so providing a jQuery specific answer isn't helpful. The OP says that the onchange listener works fine for user input, it's programmatic changes of the value that are the issue.
gonephishing over 7 years

jquery is not the default js framework for web development