Geek Answers Handbook

HTML JavaScript onChange Handler is not called when updating programmatically

I found an odd anomaly with HTML and JavaScript text fields that I narrowed down to be a feature of html / javascript, and I hope someone can educate me.

I downloaded and implemented a calendar plugin that creates a simple calendar layer and, when selected, transfers the selected date back to the text box.

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

The problem is that onchange is never called ... I was able to prove it with this very simple code below ... When the button is pressed, it changes the value, which then should trigger onchange and display a warning window ...

<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?

+4
source share
6 answers

The onchange event is not triggered by programmatically changing the value of textinput. You must call the code you want to execute after you change the value yourself.

+3
source

The onchange event in text blocks and textarea elements is fired only when the element loses focus, and if its value is now different from its value when it received focus.

+2
source

Why don't you create a custom function, for example:

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

Onchange is not called until the field loses focus / another edit field receives focus.

0
source

It is best to put your own code to handle the change in the function (for example, handleTextChange ), and then call this function both from the change event handler and when making changes directly to 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 few comments off topic:

  • It is probably best to use onchange rather than onchange . In HTML, this does not matter; in XHTML, this matters, and the reflected property on the element is always all lowercase, so ... And it's easier to type .:-)
  • If you have no good reason, I would recommend connecting event handlers after the fact, and not with built-in HTML attributes. Due to differences in the browser, this is easiest to do using the jQuery , Closure , Prototype , YUI library or any of several others , but, of course, you can do something yourself that the library can do, it may take longer and getting less testing. :-)
0
source

More articles:


All Articles