Why input event not working with input type hidden?

Question

I have to get value of hidden input when its changed. But my listeners not working.

const citySelector = document.querySelector('#city_lat');
citySelector.addEventListener('change', function () {
   alert('changed');
});

The selecter is correct. I have cheked in browser console. Event 'input' not works too

Please provide the HTML too so we can run it and see the behavior you describe. — takendarkk, Feb 01 '19 at 10:08
Possible duplicate of https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically — 04FS, Feb 01 '19 at 10:12
onchange event works only when user has changed the input, or is triggered in code using something like $('#city_lat').trigger('change'). Hidden input cannot be changed by user, so no change event will be triggered by default. — Max, Feb 01 '19 at 10:12
Possible duplicate of [How do I programmatically force an onchange event on an input?](https://stackoverflow.com/questions/136617/how-do-i-programmatically-force-an-onchange-event-on-an-input) — Carl Binalla, Feb 01 '19 at 10:17
[How to detect changes of hidden inputs with MutationObserver](https://stackoverflow.com/a/73635030/19940381) — Pavel Zifcak, Sep 07 '22 at 11:58

score 2 · Answer 1 · answered Feb 01 '19 at 10:10

Change events fire when the user changes the value of the input. Input events fire when the user inputs data.

They don't fire if you change the value of the input with JavaScript.

Since it is a hidden input, JavaScript is the only way you can change the value of the input.

If you want to trigger the event handler as your code changes the value, then you need to trigger the event with your code as well.

This question covers that.

score 0 · Answer 2 · answered Feb 01 '19 at 10:16

If you are expecting the hidden field to trigger event, so I am assuming you want the programmatic solution (and this the only way to achieve this). Below is the solution to do that.

 
 const citySelector = document.querySelector('#city_lat');
        citySelector.addEventListener('change', function () {
            alert('changed');
        });
        
       citySelector.value="Changed Value";
       citySelector.dispatchEvent(new Event('change'));

<input type="hidden" id="city_lat"/>

score 0 · Answer 3 · answered Feb 01 '19 at 10:19

You can use EventTarget.dispatchEvent() to trigger the event when value changes:

Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent().

Try the following way:

var citySelector = document.getElementById('city_lat');

citySelector.addEventListener('change', function () {
    alert('changed');
});
citySelector.value ='London';
citySelector.dispatchEvent(new Event('change'));

<select id="city_lat" hidden>
  <option value="">Select</option>
  <option value="London">London</option>
  <option value="New York">New York</option>
</select>

score 0 · Answer 4 · answered Feb 01 '19 at 10:24

You can redefine the value property for the input. And then observe the changes:

var targetNode = document.getElementById('city_lat');

Object.defineProperty(targetNode, "value", {
    set:  function (t) {
        console.log('value of hidden field changed!');
        targetNode.setAttribute('value',t)
    },
    get:function(){
        return targetNode.getAttribute('value');
    }
});


// Testing ...
window.setTimeout(function(){
   // changing the value to 12
   targetNode.value="12";
   console.log(targetNode.value);
},2000);

<input id="city_lat" type="hidden" value="0">

score 0 · Answer 5 · answered Feb 01 '19 at 10:24

0

How on change event will trigger when user doesn't inputs something, when you modify with js or jquery it won't fire the event. if you provide what you are trying to do , someone can tell you what exactly you need to do.

answered Feb 01 '19 at 10:24

suhail ahmed

122
1
12

score 0 · Answer 6 · answered Sep 07 '22 at 12:01

0

For watching changes of values - and not only of them - of input type="hidden", you can use MutationObserver, as depicted in How to detect changes of hidden inputs with MutationObserver

answered Sep 07 '22 at 12:01

Pavel Zifcak

1

score 0 · Answer 7 · edited Apr 14 '23 at 16:25

I'd like to add some small info where you will want to implement the rest of the code using the value from input

var targetNode = document.getElementById('city_lat');

Object.defineProperty(targetNode, "value", {
    set:  function (t) {
        console.log('value of hidden field changed!');
        targetNode.setAttribute('value',t);
        
        let citylat = targetNode.value; // here you get the value from input
        
        // your code using the variable citylat
        
    },
    get:function(){
        return targetNode.getAttribute('value');
    }
});

Why input event not working with input type hidden?

7 Answers7