jQuery textbox.val('xxxx') not causing change to fire?

Question

I have the following jQuery code in place on my page:

var isChanged = false;
$(document).ready(function()
{
    $('.change').change(function() {
        isChanged = true;
    });
});

I am using a plugic that modifies the value of the text box it is linked to using:

target.val('xxxx');

the text box in the html (from asp.net) is:

<input name="ctl00$cphHolder1$rptFlex$ctl01$txtLeftRank"
  type="text"
  value="52°"
  id="ctl00_cphHolder1_rptFlex_ctl01_txtLeftRank"
  class="change atiselector" />

When the value of the text box is changed using code, the change is not firing. If I type in the text box, the change fires. What am I missing?

Pointy · Accepted Answer · 2010-02-11 20:15:23Z

78

That's the way it works. If you need the change of value to trigger the "change" event, you can explicitly do so by:

$('input#whatever').val('hi').change();

answered Feb 11, 2010 at 20:15

Pointy

415k62 gold badges600 silver badges632 bronze badges

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

2 Comments

Andrew Bullock Over a year ago

One of the stupidest things ever. Tempted to patch val() to make it behave sensibly

NobodyMan Over a year ago

@AndrewBullock and if you implemented this "sensible" patch, you wouldl likely discover it significantly degrades your app's performance.

Yuriy Faktorovich · Accepted Answer · 2010-02-11 20:15:16Z

4

$('.change').change() will fire the event. Just changing the attributes doesn't fire the event.

answered Feb 11, 2010 at 20:15

Yuriy Faktorovich

68.9k14 gold badges107 silver badges150 bronze badges

Comments

James Skemp · Accepted Answer · 2020-08-14 19:20:04Z

4

According to DOM Level 2 Event Specification:

The change event occurs when a control loses the input focus and its value has been modified since gaining focus.

That means that change event is designed to fire on change by user interaction. Programmatic changes doesn't cause this event to be fired.

edited Aug 14, 2020 at 19:20

James Skemp

8,6119 gold badges71 silver badges116 bronze badges

answered Dec 16, 2014 at 8:49

deepend0

3373 silver badges7 bronze badges

Comments

Ilya Golota · Accepted Answer · 2021-08-15 01:35:19Z

0

As mentioned above change event is designed to fire by user interaction. If you want to do something after setting value programmatically you can use jQuery valHooks

var isChanged = false;
$.valHooks['text'] = {
    set: function (elem, value) {
        if ($(elem).is('.change')) {
            elem.value = value;
            isChanged = true;
            return true;
        }
    }
};

answered Aug 15, 2021 at 1:35

Ilya Golota

517 bronze badges

Collectives™ on Stack Overflow

jQuery textbox.val('xxxx') not causing change to fire?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related