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 to set up a custom listener — Hamms
– Hamms, Commented Dec 5, 2017 at 20:15

Ioan-Radu Tanasescu · Accepted Answer · 2017-12-05 20:06:44Z

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 5, 2017 at 20:06

Ioan-Radu Tanasescu

5664 silver badges18 bronze badges

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

Comments

Training at Manorama · Accepted Answer · 2017-12-05 20:10:03Z

1

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

answered Dec 5, 2017 at 20:10

Training at Manorama

1672 silver badges10 bronze badges

Comments

slon · Accepted Answer · 2017-12-05 20:07:23Z

0

Add the one more line after your code:

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

answered Dec 5, 2017 at 20:07

slon

1,0501 gold badge8 silver badges14 bronze badges

7 Comments

slon Over a year ago

This will depend on your jQuery lib version

Osman Over a year ago

Currently using the latest version, does this only work for an older version?

slon Over a year ago

It can be like $("input").on("change"); or $("input").change();

Gabriele Petrioli Over a year ago

.bind('change') will do nothing. Maybe you meant .trigger('change')

slon Over a year ago

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()

|

Collectives™ on Stack Overflow

How to detect value changes of an input jQuery?

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related