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.

I have downloaded and implemented a calendar plug-in that creates a simple layer with a calendar and on selection, passes the selected date back to the text box.

What I want to do is catch when the text box changes (using onchange) and then call an Ajax function to update the database...

The problem is, onchange never gets called... I have been able to prove it with this very simple code below... When the button is clicked it changes the value which should then trigger the onchange and display an alert box...

<input type="button" name="setValue" id="setValue" value="setValue" onClick="document.getElementById('textinput').value='Updated'">&nbsp;
<input type="button" name="clearValue" id="clearValue" value="clearValue" onClick="document.getElementById('textinput').value=''"><br>
<input type="text" name="textinput" id="textinput" onChange="alert(this.name)">

Is this standard? Is there a workaround?

Answer 1

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 2

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 3

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

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

Answer 4

Try this thread:

Call Javascript onchange event by programatically changing textbox value

Answer 5

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

Answer 6

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 7

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);