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
– AxGryndr, Commented Apr 16, 2013 at 22:19
He wants the alert be triggered not by the click itself, but by the change within the textbox. — Hanlet Escaño
– Hanlet Escaño, Commented Apr 16, 2013 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: stackoverflow.com/questions/1481152/… — Hanlet Escaño
– Hanlet Escaño, Commented Apr 16, 2013 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
– Sammy, Commented Apr 16, 2013 at 22:39

VisioN · Accepted Answer · 2013-04-16 22:22:46Z

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, 2013 at 22:22

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

4 Comments

Sammy Over a year ago

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 Over a year ago

@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.

NedStarkOfWinterfell Over a year ago

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?

VisioN Over a year ago

@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.

Khadir Salah · Accepted Answer · 2019-09-12 06:39:55Z

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, 2019 at 6:39

Khadir Salah

531 silver badge5 bronze badges

answered Apr 16, 2013 at 22:53

AxGryndr

2,3742 gold badges22 silver badges46 bronze badges

1 Comment

Oliver White Over a year ago

triggering change is a pretty good option, whenever regular events not firing.

Kenneth · Accepted Answer · 2013-04-16 22:23:56Z

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, 2013 at 22:23

answered Apr 16, 2013 at 22:16

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

2 Comments

Sammy Over a year ago

Thanks Kenneth. This will work, but I only wish to accomplish this by adding an event listener to the textbox not the button

Kenneth Over a year ago

I'm afraid that apart from raising the event yourself, this is not possible

Nathan Rice · Accepted Answer · 2015-03-10 17:45:47Z

0

You need to simply use keyup function:

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

edited Mar 10, 2015 at 17:45

Nathan Rice

3,1211 gold badge22 silver badges30 bronze badges

answered Mar 10, 2015 at 11:47

Shah Nawaz

3962 silver badges9 bronze badges

Comments

Stefan Avramovic · Accepted Answer · 2019-09-12 08:12:06Z

0

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>

answered Sep 12, 2019 at 8:12

Stefan Avramovic

1,3532 gold badges11 silver badges21 bronze badges

Collectives™ on Stack Overflow

jquery detect textbox value change NOT based on user input

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related