jquery detect textbox value change NOT based on user input

Question

Let's say you have a simple Text Box and button on your page. Clicking on the button will update the textbox value:

HTML:

<input type="text" id="myText" val="" />
<input type="button" id="myBtn" value="Change TextBox Value" />

jQuery:

$("#myBtn").on('click', function() {
   $("#myText").val('adsf');
})

I'd like to add an event listener for the change event of the textbox, like so:

$('#myText').on('change', function(){
    alert('Changed!')
});

That alert does not get triggered when you click the button but it does get triggered when you manually change the textbox value and focus out of it.

I know you can add $("#myText").trigger('change') to the onclick event of the button, but I wish to only accomplish this by adding an event listener to the textbox.

jsfiddle

Thanks

Just as clarification - you want the alert triggered by both manually changing the text box and by clicking the button? — AxGryndr, Apr 16 '13 at 22:19
He wants the alert be triggered not by the click itself, but by the change within the textbox. — Hanlet Escaño, Apr 16 '13 at 22:20
@Sammy, just out of curiosity, what exactly are you trying to accomplish with this? This has been asked previously btw, and no real answer was provided, I am guessing the same is going to happen to this question: http://stackoverflow.com/questions/1481152/jquery-how-to-detect-a-textboxs-content-has-changed — Hanlet Escaño, Apr 16 '13 at 22:30
@HanletEscaño, I have a bunch of text boxes on a page that get updated based on various actions (not necessarily by user input). I need to know whenever these textboxes get updated. Since there are several ways that the text boxes can get updated I was trying to avoid adding a manual triggering for each one, but it seems I don't have another choice. — Sammy, Apr 16 '13 at 22:39

score 19 · Accepted Answer · answered Apr 16 '13 at 22:22

19

There is no such event supported. The only thing you can try is to set interval or timeout to check if the value was changed (using data to store temporary value):

var $myText = $("#myText");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
        val = $myText.val();

    if (data !== val) {
        $myText.data("value", val);
        alert("changed");
    }
}, 100);

DEMO: http://jsfiddle.net/xZcAr/1/

answered Apr 16 '13 at 22:22

VisioN

143,310
32
282
281

Great idea, however, I am not sure what kind of performance hit the page would take if you had a lot of text boxes on the page. – Sammy Apr 16 '13 at 22:29
@VisionN - Thanks for the help. I will accept this as the answer, since it will technically work but not the preferred method unless I go with manual triggering as you suggested. – Sammy Apr 16 '13 at 22:44
This by far looks the simplest and cleanest solution. The only issue seems to be perf. Will a setIntervalMethod eventually clog up the webpage and make it slow? – SexyBeast Apr 12 '17 at 20:35
1

@SexyBeast No, it won't. Modern CPUs can easily work with multiple background tasks without affecting the general performance. Moreover, interval of 100 milliseconds is long enough, it won't slow the webpage. – VisioN Apr 13 '17 at 07:22

score 4 · Answer 2 · edited Sep 12 '19 at 06:39

4

Why not force a manual event when the button is clicked like so -

$('#myText').on('change',function(e){
    alert('Changed!');
});

$("#myBtn").on('click', function() {
    $("#myText").val('adsf');
    $("#myText").change();
})

edited Sep 12 '19 at 06:39

Khadir Salah

23
5

answered Apr 16 '13 at 22:53

AxGryndr

2,274
2
22
45

triggering change is a pretty good option, whenever regular events not firing. – Oliver White Feb 16 '20 at 18:30

Kenneth · Answer 3 · 2013-04-16T22:23:56.120

0

You'd need to connect both handlers. To reuse the handler you can extract it to a named function:

function showChanged(){
    alert('Changed!')
}

$("#myBtn").on('click', showChanged);
$("#myText").on('change', showChanged);

edited Apr 16 '13 at 22:23

answered Apr 16 '13 at 22:16

Kenneth

28,294
6
61
84

Thanks Kenneth. This will work, but I only wish to accomplish this by adding an event listener to the textbox not the button – Sammy Apr 16 '13 at 22:23
I'm afraid that apart from raising the event yourself, this is not possible – Kenneth Apr 16 '13 at 22:27

score 0 · Answer 4 · edited Mar 10 '15 at 17:45

0

You need to simply use keyup function:

$( "#myText").keyup(function(){
   alert($(this).val());
});

edited Mar 10 '15 at 17:45

Nathan Rice

3,091
1
20
30

answered Mar 10 '15 at 11:47

Shah Nawaz

396
2
9

score 0 · Answer 5 · answered Sep 12 '19 at 08:12

You can do something like this. Instead of listening for an input field listen to a change on div that gets updated att same time.

function trigger(){
setTimeout(function(){ 
document.getElementsByName("Thing")[0].value = 'hello'
document.getElementById('myDiv').innerHTML = document.getElementsByName("Thing")[0].value 

}, 3000);
}

trigger()
document.getElementById("myDiv").addEventListener('DOMSubtreeModified', (e)=>{
  console.log(e.target.innerHTML)
 
});

<input type="text" name="Thing" value="" />
<div style="display:none;" id="myDiv"></div>

jquery detect textbox value change NOT based on user input

5 Answers5