How to detect when the value of an input changes dynamically with JS / Jquery

Question

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.net/xpvt214o/486146/

@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
– 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
– Blue, Commented Jul 25, 2018 at 21:56

Louys Patrice Bessette · Accepted Answer · 2018-07-25 21:50:21Z

4

Just trigger the event!

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

answered Jul 25, 2018 at 21:50

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

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

1 Comment

Eduardo Ponce de Leon Over a year ago

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

Louys Patrice Bessette · Accepted Answer · 2018-07-25 22:25:26Z

2

Inpired of Ele's answer...

While overriding the .val() function... Instead of comparing 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.com/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">

answered Jul 25, 2018 at 22:25

Louys Patrice Bessette

34k7 gold badges41 silver badges70 bronze badges

1 Comment

rudi Ladeon Over a year ago

Yes this sample code worked for me, thanks you very much ;)

Ele · Accepted Answer · 2018-07-25 21:49:55Z

1

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

answered Jul 25, 2018 at 21:49

Ele

33.8k7 gold badges43 silver badges80 bronze badges

2 Comments

Eduardo Ponce de Leon Over a year ago

Nice, but this affects any other val() across the script, Thanks this is a solution, but is there a cleaner way? Thanks

Sphinx Over a year ago

@multimediaxp check https://stackoverflow.com/a/32383745/5665870

Collectives™ on Stack Overflow

How to detect when the value of an input changes dynamically with JS / Jquery

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related