How to track input type=hidden value change in jquery

In jQuery, you can track changes to a hidden input field (input type="hidden") using the change method. However, this won’t work directly because hidden fields do not trigger the change event. Instead, you need to manually trigger the event after changing the value.

Example:

// Set the value and trigger the event manually
$('#myHiddenInput').val('new value').trigger('change');

// Track changes
$('#myHiddenInput').on('change', function () {
    console.log('Value changed to:', $(this).val());
});

If you are updating the value via JavaScript, don’t forget to call trigger('change').

Alternative Method: Using MutationObserver

To track any changes to the element, you can use MutationObserver, which works even for hidden elements.

Example:

// Find the hidden input
const hiddenInput = document.getElementById('myHiddenInput');

// Create a MutationObserver
const observer = new MutationObserver((mutationsList) => {
    mutationsList.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
            console.log('New value:', hiddenInput.value);
        }
    });
});

// Configure the observer to watch for attribute changes
observer.observe(hiddenInput, { attributes: true });

This approach works if the value of the hidden field is changed directly, for example, using element.setAttribute('value', 'new value').