EN
JavaScript - fire onchange event manually
5
points
In this short article, we would like to show you how to fire onchange evet manually in JavaScript.
Quick solution:
element.dispatchEvent(new Event('change'));
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<script>
var dispatchEvent = function(element, event) {
element.dispatchEvent(new Event(event));
};
</script>
</head>
<body>
<input id="element" value="Old value ..." onchange="console.log('onchange event fired!')" />
<script>
var element = document.querySelector('#element');
element.addEventListener('change', function() {
console.log('onchange event fired!');
});
// Usage example:
function changeValue() {
element.value = 'New value ...';
dispatchEvent(element, 'change'); // <------ fires an event simulating a change in values
}
setTimeout(changeValue, 1000);
</script>
</body>
</html>