HTML JavaScript onChange Handler is not called when updated programatically

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 prov开发者_如何学Pythone 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?

---

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.

---

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.

---

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

---

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

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

---

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

---

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. :-)