I would like to add an event listener to a hidden input element.

I've tried:

document.querySelector('#myDate').addEventListener('change', foo);

Where foo is a function that I want to call on change.

I am aware that jQuery does not by default trigger change and I've also looked at the site's source good and the website has not used .change() or .trigger() but only uses .val() whenever they're trying to update the value of the hidden element. I've also tried the different methods laid out in jQuery - Detect value change on hidden input field but that didn't help either.

My HTML element:

<input type="hidden" name="myDate" id="myDate" value="31-DEC-2017">

I've also tried adding an event listener to each date element in my calendar which is basically a table and each date is a td element. But that failed too.

Edit:

It seems as if most of you have misinterpreted what my end goal is, I am sorry about not conveying clearly what I wanted to do. I simply want to add a listener to my hidden input element, so that whenever the value attribute of my element is changed, I trigger a function.

I would like to add an event listener to a hidden input element.

I've tried:

document.querySelector('#myDate').addEventListener('change', foo);

Where foo is a function that I want to call on change.

I am aware that jQuery does not by default trigger change and I've also looked at the site's source good and the website has not used .change() or .trigger() but only uses .val() whenever they're trying to update the value of the hidden element. I've also tried the different methods laid out in jQuery - Detect value change on hidden input field but that didn't help either.

My HTML element:

<input type="hidden" name="myDate" id="myDate" value="31-DEC-2017">

I've also tried adding an event listener to each date element in my calendar which is basically a table and each date is a td element. But that failed too.

Edit:

It seems as if most of you have misinterpreted what my end goal is, I am sorry about not conveying clearly what I wanted to do. I simply want to add a listener to my hidden input element, so that whenever the value attribute of my element is changed, I trigger a function.

• javascript
• html
• jquery

• 2 change events are only triggered when the user changes an input, not when it's changed by code. The user can't edit a hidden input. – Barmar Commented Jun 15, 2020 at 22:18
• 1 Please provide a Minimal, Reproducible Example: stackoverflow./help/minimal-reproducible-example – Twisty Commented Jun 15, 2020 at 22:34

2 Answers 2

You can use Object.defineProperty to define getters and setters for the value property of the input so you are notified every time the property is set.

var input = document.getElementById("myDate");
var value = input.value;
Object.defineProperty(input, "value", {
    set(newValue) {
        console.log("Value changed to", newValue);
        value = newValue;
    },
    get(){
        return value;
    }
});
$('#changeValue').click(function(e){
  $('#myDate').val($('#newValue').val());
});

<input type="hidden" name="myDate" id="myDate" value="31-DEC-2017">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="newValue">
<button id="changeValue">Change Value!</button>

You can also use MutationObserver.

var input = document.getElementById("myDate");
var observer = new MutationObserver(function(mutations, observer) {
    if(mutations[0].attributeName == "value") {		
        $(input).change();
    }
});
observer.observe(input, {
    attributes: true
});
$(input).change(function(e){
    console.log("Value changed to", $(this).val());
});
$('#changeValue').click(function(e){
  $('#myDate').val($('#newValue').val());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="hidden" name="myDate" id="myDate" value="31-DEC-2017">
<input id="newValue">
<button id="changeValue">Change Value!</button>

It is unclear how you are changing the value of hidden filed as it is hidden, and what is perupse of that, but you can use bind DOMSubtreeModified witch will track any changes in DOM element and its subtree.

var val= $("#myDate").val();
console.log(val);

$("#myDate").bind("DOMSubtreeModified", function() {

// call your function

var val= $("#myDate").val();
console.log("changed");
console.log(val);
});


$("#add").click(function() {
    $("#myDate").val("21-DEC-2017");
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" name="myDate" id="myDate" value="31-DEC-2017">

<button id="add">add diffrent value</button>