Is the "change" Event Supported on HTML Hidden Inputs?

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.