CODEWITHSUNDEEP
javascriptjquery
maharshi
maharshi

Reputation: 594

Onchange of a input field changed by Javascript

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.

Upvotes: 2

Views: 5362

Answers (3)

Saumya Rastogi
Saumya Rastogi

Reputation: 13703

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

Upvotes: 6

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="hidden">

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

Upvotes: 1

Surya Purohit
Surya Purohit

Reputation: 1120

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');

Upvotes: -3

Related Questions