How to Trigger "change" Event on HTML "hidden" input Element Using JavaScript?

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:

1. Check if the hidden input value is not already set to the new value;
2. Use the onclick event on the <button> element to change the value of the hidden input, and;
3. Trigger the change event on the hidden input using EventTarget.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:

1. Create a new MutationObserver instance, and pass in a callback function, which will be invoked when a mutation is detected;
2. 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';
3. Trigger the change event if the mutation type and the attribute name match, and the hidden input value changes;
4. 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:

1. Check the value of the hidden input periodically for changes, and
2. 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);