User interaction events, such as the change
event, do not trigger on the HTML <input type="hidden">
element (as their values cannot be changed by the user). However, you can still trigger (and listen to) the change
event on the hidden input element in the following ways:
- Manually Triggering Change Event;
- Observe changes to the Input Value Using
MutationObserver
; - Observe changes to the Input Value Using Polling.
Ideally, you should not need to do this, and should reconsider substituting the hidden input fields instead, perhaps.
Manually Triggering Change Event
You can manually trigger the change
event on the hidden input, in the following steps:
- Check if the hidden input value is not already set to the new value;
- Use the
onclick
event on the<button>
element to change the value of the hidden input, and; - Trigger the
change
event on the hidden input usingEventTarget.dispatchEvent()
method.
For example, this can be implemented like so:
<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 changed'); });
button.addEventListener('click', function () { const newValue = 'bar'; // 1: check if value is not already set to the `newValue` if (hiddenInput.value !== newValue) { // 2: change value hiddenInput.value = newValue; // 3: trigger `change` event hiddenInput.dispatchEvent(new Event('change')); } });
Observe changes to the Input Value Using MutationObserver
You can use MutationObserver
interface to monitor changes to the value of the hidden input in the following way:
- Create a new
MutationObserver
instance, and pass in a callback function, which will be invoked when a mutation is detected; - In the callback, iterate over each record in the array of
MutationRecord
objects to check for mutations of the type 'attributes
' and the attribute name 'value
'; - Trigger the
change
event if the mutation type and the attribute name match, and the hidden input value changes; - Call the
MutationObserver.observe()
method, with the hidden input element and an options object as arguments (where the options object specifies the changes you are interested in observing).
<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 changed'); }); button.addEventListener('click', function () { hiddenInput.value = 'bar'; });
// ES6+ let previousValue = hiddenInput.value; // 1: create `MutationObserver` instance const observer = new MutationObserver((mutations) => { // 2: iterate over `MutationRecord` array mutations.forEach(mutation => { // 3.1: check if the mutation type and the attribute name match // 3.2: check if value changed if ( mutation.type === 'attributes' && mutation.attributeName === 'value' && hiddenInput.value !== previousValue ) { previousValue = hiddenInput.value; // 3.4: trigger `change` event hiddenInput.dispatchEvent(new Event('change')); } }); }); // 4: observe changes on `hiddenInput` observer.observe(hiddenInput, { attributes: true });
Observe changes to the Input Value Using Polling
You can poll the hidden input to monitor changes to its value in the following way:
- Check the value of the hidden input periodically for changes, and
- Trigger the
change
event when the hidden input value changes.
For example, this can be implemented like so:
<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 changed'); }); button.addEventListener('click', function () { hiddenInput.value = 'bar'; });
let previousValue = hiddenInput.value; setInterval(function() { // 1: check if value changed if (hiddenInput.value !== previousValue) { previousValue = hiddenInput.value; // 2: trigger `change` event hiddenInput.dispatchEvent(new Event('change')); } }, 500);
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.