I am able to detect if an input changes value while typing, pasting, etc, But if the value changed dynamically from another script I am unable to detect it:

Lets say I have an input

<input id="testInput" value="Type Here" />

And if the value changes by typing on it I want to alert "changed"

$('#testInput').on('input', function(){
    alert("changed");
});

This works, but if the value changed dynamically from another script, I can't trigger the alert:

$('#testInput').val("Dynamic Value"); //This doesn't show the alert

I want to be able to detect if the value changed at all, either by typing, pasting, or dynamically from a script or action.

.val() Is beeing executed in many different places, so changing .val() all over the code for something else like .val().trigger("change") is not an option.

Here is a jsfiddle with a better example:

/

I am able to detect if an input changes value while typing, pasting, etc, But if the value changed dynamically from another script I am unable to detect it:

Lets say I have an input

<input id="testInput" value="Type Here" />

And if the value changes by typing on it I want to alert "changed"

$('#testInput').on('input', function(){
    alert("changed");
});

This works, but if the value changed dynamically from another script, I can't trigger the alert:

$('#testInput').val("Dynamic Value"); //This doesn't show the alert

I want to be able to detect if the value changed at all, either by typing, pasting, or dynamically from a script or action.

.val() Is beeing executed in many different places, so changing .val() all over the code for something else like .val().trigger("change") is not an option.

Here is a jsfiddle with a better example:

https://jsfiddle/xpvt214o/486146/

• javascript
• jquery
• input
• dynamic
• triggers

• input paste keyup change === input – Ele Commented Jul 25, 2018 at 21:43
• @Ele, thanks for the correction. – Eduardo Ponce de Leon Commented Jul 25, 2018 at 21:44
• Take a look here: stackoverflow./a/23635867/4875631 – Blue Commented Jul 25, 2018 at 21:46
• @FrankerZ There are many places where .val() might be executed, I don't want to go change every single .val(), I just want to detect when it is executed, thanks – Eduardo Ponce de Leon Commented Jul 25, 2018 at 21:52
• @multimediaxp That isn't changing every .val(). That's overridding the main .val() function in jQuery. – Blue Commented Jul 25, 2018 at 21:56

3 Answers 3

Just trigger the event!

$('#testInput').val("Dynamic Value").trigger("input");

Inpired of Ele's answer...

While overriding the .val() function... Instead of paring the id, you could add an agrument for the even to trigger! If it's not provided, there is no change from the "regular" .val() function. If provided, it triggers the event.

You will have to change every places where the value is programmatically changed anyway, but in a more practical way. ;)

var $val = $.fn.val;
$.fn.val = function(newVal,eventToTrigger) {
  if (eventToTrigger != null) this.trigger(eventToTrigger);
  $val.call(this, newVal);
}

$('.someClass').on('input', function() {
  alert("Programmatically inputted!");
});

$('.otherClass').on('change', function() {
  alert("Programmatically changed!");
});

$('.someClass').val('Hello you!','input');
$('.otherClass').val('Doing fine?','change');
$('#whatever').val('Hehehe.');

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

<input type="text" class="someClass">
<input type="text" class="otherClass">
<input type="text" id="whatever">

An alternative is overriding the function $.fn.val()

This is a basic approach to start with.

var $val = $.fn.val;
$.fn.val = function(newVal) {
  if (this.attr('id') === 'target') this.trigger('input');
  $val.call(this, newVal);
}

$('#target').on('input', function() {
  alert("changed");
});

$('#target').val('Ele from Stack');
$('#target2').val('Ele from Stack2');

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

<input id='target' />
<input id='target2' />