I have a textbox that gets populated from my database. I want to run a JavaScript when the text in the textbox is changed. I am using the event onChange but this is not working. It runs the script only if I manually change the text in the textbox. Not when it is filled from the database (without keypress or select).
Here is my textbox:
<input type="hidden" class="form-control" id="name" onChange='runScript(this.value)'>
How can I make this working for me?
Method like this might help, after you call sql to get the data and load the text input element, call var initValue = document.getElementById('name').value; and runScript(initValue); to manually call the function.
<input type="hidden" class="form-control" id="name" onChange='runScript(this.value)' value="test value">
<script>
function runScript(value) {
console.log('value--->' + value);
}
//get init value
var initValue = document.getElementById('name').value;
//init
window.onload = runScript(initValue);
</script>
Setting the value of a textfield (or textarea) from JavaScript does not fire a change event.
You have to manually trigger a change event after setting its text if you want event handlers to be called.
See How can I trigger a JavaScript event click
You could do what Daniel suggested (call your change handler function directly) but that would mean that if there are multiple change handlers, you'd have to call them all manually. This solution works even if you add more handlers in the future, or even dynamically.
/**
* Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
* by testing for a 'synthetic=true' property on the event object
* @param {HTMLNode} node The node to fire the event handler on.
* @param {String} eventName The name of the event without the "on" (e.g., "focus")
*/
function fireEvent(node, eventName) {
// Make sure we use the ownerDocument from the provided node to avoid cross-window problems
var doc;
if (node.ownerDocument) {
doc = node.ownerDocument;
} else if (node.nodeType == 9) {
// the node may be the document itself, nodeType 9 = DOCUMENT_NODE
doc = node;
} else {
throw new Error("Invalid node passed to fireEvent: " + node.id);
}
if (node.dispatchEvent) {
// Gecko-style approach (now the standard) takes more work
var eventClass = "";
// Different events have different event classes.
// If this switch statement can't map an eventName to an eventClass,
// the event firing is going to fail.
switch (eventName) {
case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
case "mousedown":
case "mouseup":
eventClass = "MouseEvents";
break;
case "focus":
case "change":
case "blur":
case "select":
eventClass = "HTMLEvents";
break;
default:
throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
break;
}
var event = doc.createEvent(eventClass);
event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.
event.synthetic = true; // allow detection of synthetic events
// The second parameter says go ahead with the default action
node.dispatchEvent(event, true);
} else if (node.fireEvent) {
// IE-old school style, you can drop this if you don't need to support IE8 and lower
var event = doc.createEventObject();
event.synthetic = true; // allow detection of synthetic events
node.fireEvent("on" + eventName, event);
}
};
function changeText() {
var textField = document.getElementById('name');
textField.value = 'yo';
fireEvent(textField, 'change');
}<input type="text" class="form-control" id="name" onchange="console.log('changed')" />
<button onclick="changeText()">Change text</button>
In the function you use to populate the textarea, simply add
this.onchange();
What that does is call the event triggered when you would change the value manually!
