CODEWITHSUNDEEP
javascripthtmljquery
street_jesus
street_jesus

Reputation: 383

Adding an Event Listener to a Hidden Input type in JavaScript

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.

Upvotes: 1

Views: 5840

Answers (2)

Unmitigated
Unmitigated

Reputation: 89497

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.com/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.com/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>

Upvotes: 6

ikiK
ikiK

Reputation: 6532

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.com/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>

Upvotes: 2

Related Questions