How to detect changed of a input from javascript event

Question

I want to detect whenever the content of the input field has changed. For example is the event of the button, how can i detect this change?

$('#kunden_plz').on('propertychange change keyup paste input',function(){
	console.log("PLZ: "+$(this).val());
});

$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345");  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

I hope someone has a idea, excepted this:

<button id='btn'>Click Me</button>
<input type='hidden'id='txtVar' value=''/>

$("#btn").click(function(){
   $("#txtVar").val("1234").change();
});

$(document).on('change', '#txtVar', function () {
   alert("called");
});

How i can detect a change of a input field from a javascript event? — Provie9
– Provie9, Commented Aug 30, 2016 at 9:58
So if x = "aa" and you change it to "abbbb" you want to check if value was changed when event is called? — Luka Krajnc
– Luka Krajnc, Commented Aug 30, 2016 at 9:59

Satpal · Accepted Answer · 2016-08-30 10:02:32Z

2

Event will not be triggered when you change them programmatically. However .trigger(event)/.triggerHandler(event) can be used to trigger the event.

$('#kunden_plz').on('propertychange change keyup paste input',function(){
	console.log("PLZ: "+$(this).val());
});

$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345").trigger('change');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

Second option is Polling Not Recommended

var previousVal;
var pollInterval = setInterval(function() {
    var val = $('#kunden_plz').val();
    if (val !== previousVal) {
      // It changed
      console.log("PLZ: "+val);
    }
    previousVal = val;
}, 100);

$('#change_plz').on('click',function(){
  $('#kunden_plz').val("12345").trigger('change');  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <label>Plz: </label> 
	<input id="kunden_plz" class="plz" size="5" name="plz" value="" type="text"  /> 
  </li>
</ul>
<button id="change_plz" type="button">Change</button>

edited Aug 30, 2016 at 10:02

answered Aug 30, 2016 at 9:52

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Provie9 Over a year ago

The change of the input field comes from another javascript file which i cant change with this trigger function!

Satpal Over a year ago

@Provie9, Use clearInterval once change is detected

Collectives™ on Stack Overflow

How to detect changed of a input from javascript event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related