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.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.