.change not triggered if change the value by js

javascript trigger change event
jquery trigger('change event)
jquery detect input value change
javascript input onchange get value
javascript check if input value has changed
jquery detect input value change by javascript
jquery on change
on dropdown change javascript

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>

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>

No onChange event triggered when changing value using javascript , I decided to try the other route and update my formData object. Updating that object and rerendering the form (via props) however also did not  Questions: I’m trying to trigger the change event on a text box when I change its value with a button, but it doesn’t work. Check this fiddle. If you type something in the text boxes and click somewhere else, change is triggered.

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>

Events: change, input, cut, copy, paste, The change event triggers when the element has finished changing. on keyboard input and other actions that do not involve value change,  Hi there, I have a textbox attached to an alert which I want to fire when the textbox value is changed i .e. while the user is typing. I attempted to use .trigger("change") not working for some reason - jQuery Forum

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>

.change(), The change event is sent to an element when its value changes. If the field loses focus without the contents having changed, though, the event is not triggered. What I want is : On changing value in the date-time textfield I need to reset some other fields in the page. I've added a onchange event listener to the datetimetext field which is not getting triggered, because I guess onchange gets triggered only when the element gets focus & its value is changed on losing focus.

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.

Why does the jquery change event not trigger when I set the value of , You just have to use a textarea to get multiline handling like this: <textarea name​="Text1" cols="40" rows="5"></textarea>  and at second, if you set its value by a javascript, it will not in turn cause to recalculate dependent formulas. make the form variable rather dependent on an 'Sellect all' check box so that it recalculates on its change.

jQuery change() Method, The change event occurs when the value of an element has been changed (only The change() method triggers the change event, or attaches a function to run  How can I change an HTML &lt;select&gt;'s option with JavaScript (without any libraries like jQuery), while triggering the same events as if a user had made the change? For example using following

Angular ng-change Directive, The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript. In version 4.17.37, 'change' event is not triggered on the input when a date is selected. It's true that on version 3.x 'change' was triggered when date was selected. If you have listeners for 'change', just add 'dp.change' also: $

HTMLElement: change event, When the element loses focus after its value was changed, but not commited (e.g.​, after editing the value of <textarea> or <input type="text"> ). change: A value was changed. For text inputs triggers on focus loss. input: For text inputs on every change. Triggers immediately unlike change. cut/copy/paste: Cut/copy/paste actions. The action can be prevented. The event.clipboardData property gives read/write access to the clipboard.

Comments
  • Have you ever consider using RxJS?
  • sorry to say but setInterval() is not a good solution for me because I need to trigger event just after change in value and also only trigger when the value is changed
  • This is what I thought in the beginning till I notice OP said 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
  • ahh! Thanks @Mohamed-Yousef , I missed that part.
  • I missed it before you :-) .. have a great day
  • thanks for your answer but I already mentioned that the value is being changed by external application, so can't use these methods !!!