How to detect value changes of an input jQuery?

Question

I am currently using this function to detect for any changes made to an input box in jQuery.

$(document).on("input change paste keyup", "input, textarea, select", function(e) {
    //do something
});

The problem is that when you change the value of an input through code such as this $("input").val(currentColorChosen);, the function does not run.

How do I solve this so that the function can detect all changes made to an input, including value changes made through jQuery.

direct changes to the value attribute of inputs do not by default trigger any events; you'll probably need to use something like [`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to set up a custom listener — Hamms, Dec 05 '17 at 20:15

score 2 · Answer 1 · answered Dec 05 '17 at 20:06

2

$("input").change(function(){console.log("there was a change")}) and I think you can pass the value into it as well, it's a shortcut for .on( "change", handler )

More info: https://api.jquery.com/change/

answered Dec 05 '17 at 20:06

Ioan-Radu Tanasescu

546
4
17

score 1 · Answer 2 · answered Dec 05 '17 at 20:10

I had just posted answer here

You can try using interval or timeout like this

var searchValue = $('#myTextbox').val();

function checkSearchChanged() {
    var currentValue = $('#myTextbox').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#myTextbox').val();
       console.log(searchValue)
    }
    setTimeout(checkSearchChanged, 0.1);
}

$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

checkout working plunker here

score 0 · Accepted Answer · answered Dec 05 '17 at 20:07

0

Add the one more line after your code:

$("input").val(currentColorChosen);
$("input").bind("change");

answered Dec 05 '17 at 20:07

slon

1,002
1
8
12

This will depend on your jQuery lib version – slon Dec 05 '17 at 20:20
Currently using the latest version, does this only work for an older version? – Osman Dec 05 '17 at 20:20
It can be like $("input").on("change"); or $("input").change(); – slon Dec 05 '17 at 20:21
1

`.bind('change')` will do nothing. Maybe you meant `.trigger('change')` – Gabriele Petrioli Dec 05 '17 at 20:22
Nope, I didn't mean that. It works for sure. But for this question, I would use $("input").on("change"); as question has it with .on() – slon Dec 05 '17 at 20:23
I was able to get this to work by using `$("input").val(value).keyup();` – Osman Dec 05 '17 at 20:26
Anything you have in your function (input change paste keyup), can be used as you are triggering that function – slon Dec 05 '17 at 20:27

How to detect value changes of an input jQuery?

3 Answers3