HTML JavaScript onChange Handler is not called when updated programatically

Question

I have found an odd anomaly with HTML text boxes and JavaScript that I have narrowed down to being a html/javascript peculiarity and I\'m hoping someone can educate me on.

Answer 1

Your best bet is to put your code for handling the change in a function (say, handleTextChange), and then call that function both from the change event handler and when you make changes directly in your code.

HTML:

<input type="button" name="setValue" id="setValue" value="setValue" onClick="changeField('textinput', 'Updated')">&nbsp;
<input type="button" name="clearValue" id="clearValue" value="clearValue" onClick="changeField('textinput', '')"><br>
<input type="text" name="textinput" id="textinput" onChange="handleFieldChange(this)">

JavaScript:

function changeField(id, value) {
    var field = document.getElementById(id);
    if (field) {
        field.value = value;
        handleFieldChange(field);
    }
}

---

Off-topic A couple of off-topic comments:

• Probably best to use onchange, not onChange. In HTML, it doesn't matter; in XHTML, it matters, and the reflected property on the element is always all lower-case, so... And it's easier to type. :-)
• Unless you have a good reason not to, I'd recommend hooking up event handlers after the fact rather than with inline HTML attributes. Because of browser differences, this is most easily done using a library jQuery, Closure, Prototype, YUI, or any of several others, but of course anything a library can do, you can do yourself, it just may take longer and receive less testing. :-)

Answer 2

The onchange event is not triggered by a programmatic change of the value of the textinput. You have to call the code you want to execute after you change the value yourself.

Answer 3

The onchange event on textboxes and textarea elements only fires when the element loses focus, and if its value is now other than its value when it got focus.

Answer 4

This is a very old thread and the answer can be found elsewhere, but I figured I'd post it here since I found it through my research.

The onChange call for an element can be invoked programmatically a few ways:

document.getElementById("elementID").onchange();

or

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

Answer 5

Onchange sdoesn't get called until the field loses focus/another editfield gets focus.

Answer 6

Why don't you create a custom function, like this:

function change( val ){
    var el = document.getElementById( 'textinput' );
    el.value = val;
    alert( val );
}