CODEWITHSUNDEEP
javascriptjqueryhtmlonchange
Mohammad
Mohammad

Reputation: 21489

How to fire JQuery change event when input value changed programmatically?

I want to fire the JQuery change event when the input text is changed programmatically, for example like this:

$("input").change(function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

But it doesn't work. How can I make this work?

Upvotes: 55

Views: 73348

Answers (5)

Pranav C Balan
Pranav C Balan

Reputation: 115222

change event only fires when the user types into the input and then loses focus.

You need to trigger the event manually using change() or trigger('change')

$("input").change(function() {
  console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' />

Upvotes: 62

Arun Kumar
Arun Kumar

Reputation: 78

jquery change event only works when the user types into the input and then loses focus. So you can use the following workaround to do so:- Let's say you have a button clicking on which results in change in value of input. (this could be anything else as well instead of a button)

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})

Upvotes: 0

kawnah
kawnah

Reputation: 3414

The event handler .change() behaves like a form submission - basically when the value changes on submit the console will log. In order to behave on text input you would want to use input, like below:

$("input").on('input', function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

Upvotes: 8

Dr Fred
Dr Fred

Reputation: 989

You can use the DOMSubtreeModified event:

$('input').bind('DOMSubtreeModified',function(){...})

If you want to fire both user and code changes:

$('input').bind('input DOMSubtreeModified',function(){...})

This event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...

Upvotes: 1

pedromendessk
pedromendessk

Reputation: 3638

What you need to do is trigger the change event after you've set the text. So you may create a function to do that so you won't have to repeat it every time you need to update the text, like this:

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

I've updated the fiddle,

Upvotes: 4

Related Questions