The change
event is intended to be used for elements that the user can interact with directly (such as, <input>
elements with the type
attribute set to "text
", "checkbox
", etc.). Therefore, the change
event does not trigger for <input>
elements with the type
attribute set to "hidden
" (as their values cannot be changed by the user).
For example, the following onchange
listener for <input type="hidden">
is never fired when clicking on the <button>
element, even though it changes the hidden input's value:
<input type="hidden" id="myHiddenInput" value="foo" /> <button id="myButton">Change value</button>
const button = document.getElementById('myButton'); const hiddenInput = document.getElementById('myHiddenInput'); hiddenInput.addEventListener('change', function () { console.log('hidden input value updated'); }); button.addEventListener('click', function () { hiddenInput.value = 'bar'; });
In such case, you should question whether you really need a hidden input. If you believe that you really need to listen to the onchange
event on a <input type="hidden">
element, then there are some ways in which you can trigger and listen to the change
event on it using JavaScript.
Hope you found this post useful. It was published . Please show your love and support by sharing this post.