.change not triggered if change the value by js

user_9140438 0
Viewed 3619

In my web page the value of an input is changing by a js application, but what I want is to trigger an event when a value is changed.

The problem is that when the value is changed by the application, no event is triggered because the value is changed by js but if a value is input by the user the event is triggered.

Here is a small example of this, when you click on the change button, the value is changed but the .change event does not trigger.

If you manually input the values .change will trigger. 

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

I searched for my problem and found .trigger('change') but as I already told you that value is changed by an application which I haven't developed so can't use this method.

Please tell me a real solution for my problem.

jquery-events html jquery javascript
4 Answers

On button#change_btn click , the change event of the input#id_st wont't be fired. This is because for input element to fire change event, first it's value must change and then it must loose focus. So when you click the button, it's value has changed but it never got focus to loose it later.

So you have to fire the 'change' event manually for which you can just chain trigger() once you set the value of the input with val() as 

$("#id_st").val(i).trigger('change')

You can learn more here in MDN

Demo:

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

EDIT:

Well if you can't use trigger(). You can check for change in value of the input periodically as suggested by @Mohammad.

user_67566900

use .on('input') and trigger('input')

var i = 0;
$("#id_st").on('input',function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
  // you may need to update i here to start from it after change
  i = parseInt($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i).trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

Sorry!! misunderstanding here.. Unfortunately What I know is: you cannot make the change event fire itself without relation between the event/action and the input .. OR you have to use setInterval() to catch any change of input value after each amount of time

This is how to trigger the event using setInterval() without need to trigger the event in the uncontrolled application

var i = 0;
$("#id_st").on('input',function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
  // you may need to update i here to start from it after change
  i = parseInt($(this).val());
});

$('#change_btn').click(function(){
  i = i+1;
  $("#id_st").val(i);
});

// setInterval every 5 seconds
setInterval(function(){
  $("#id_st").trigger('input');
} , 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

user_33858270

If you're not the one who's changing the value, then I think there's only one way to trigger the change, you'll have to put a setTimOout() function on the input which will take the value of the <p> and check if it's different from the one before.
(In page load capture the <p> value and every time your setTimeOut() runs update that value).
If it's different then trigger the change with jQuery.

user_71826770

After doing some research on MDN web docs, i found some stuff on manually firing events Dispatch Event Function Examples 

var i = 0;
$("#id_st").change(function(){
  console.log('This is value',$(this).val())
  $('#p').html($(this).val());
});

$('#change_btn').click(function(){
  var event = new Event('change');
  var target = document.getElementById('id_st');
  i = i+1;
  $("#id_st").val(i);
  target.dispatchEvent(event);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="id_st" type="text" name="st" value="0">
<br>
<button id="change_btn" type="button" name="button">change value</button>
<br>
<p id="p">value</p>

user_100852660
Related