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
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.
You can use EventTarget.dispatchEvent() to trigger the event when value changes:
Dispatches an
Eventat the specifiedEventTarget, (synchronously) invoking the affectedEventListenersin the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually withdispatchEvent().
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>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"/>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">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.
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
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');
}
});
