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

Find out if the change event works with HTML input element with type set to "hidden"

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.