I have a input field type="hidden" which is changed by javascript itself.

When this field changes i want an event/function to be triggered.

Tried this:

$(".product_id").on("change paste keyup input", function(event){alert('1');});
$(".product_id").blur(function(event){alert('1');});
$(".product_id").keypress(function(event){alert('1');});

But it does not seem to work as the value is changed by other JavaScript file itself.

I cannot change or add to the existing JavaScript. I cannot add anything to the input field.

I have a input field type="hidden" which is changed by javascript itself.

When this field changes i want an event/function to be triggered.

Tried this:

$(".product_id").on("change paste keyup input", function(event){alert('1');});
$(".product_id").blur(function(event){alert('1');});
$(".product_id").keypress(function(event){alert('1');});

But it does not seem to work as the value is changed by other JavaScript file itself.

I cannot change or add to the existing JavaScript. I cannot add anything to the input field.

• javascript
• jquery

3 Answers 3

You can use jQuery's trigger method & change event.

Changes in value to hidden elements don't automatically fire the .change() event. So, as soon as you change the hidden inputs, you should tell jQuery to trigger it using .trigger('change') method.

You can do it like this:

$(function() {
  $("#field").on('change', function(e) {
  	alert('hidden field changed!');
  });
  
  $("#btn").on('click', function(e) {
  	$("#field").val('hello!').trigger('change');
    console.log('Hidden Filed Value: ' + $('#field').val());
  });
  
  console.log('Hidden Filed Value: ' + $('#field').val());
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field" type="hidden" name="name">
<button id="btn">
  Change Hidden Field Value
</button>

Hope this helps!

It's just a hack if you can't trigger change event from sources.

May not be a good solution with setInterval(). But helps in the cases where you can't trigger change event from sources which are changing the hidden input value.

$("#input")[0].oninput = function(){
  $("#hidden").val($(this).val()); //setting hidden value
}
var oldVal = $("#hidden").val();
setInterval(function(){ //listening for changes
  var newVal = $("#hidden").val(); 
  if(newVal !== oldVal){
    console.log(newVal);
    oldVal = newVal;
  }
}, 1000);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="hidden">

<input type="text" id="input">

var element = $(".product_id");
element.on("change", function(){
    alert('hey');
}).triggerHandler('change');

and we need to trigger it programmatically like:

$('.product_id').val('abcd').triggerHandler('change');