Input event does not work if value is changed using jQuery val () or JavaScript

Question

If I programmatically change the value of an input field, the input and change events do not fire. For example, I have a script like this:

 var $input = $('#myinput'); $input.on('input', function() { // Do this when value changes alert($input.val()); }); $('#change').click(function() { // Change the value $input.val($input.val() + 'x'); }); 

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Problem: An event is fired when a text field is entered, but not when a button is pressed. Is there a way to achieve this with some kind of event or otherwise without having to do it manually?

What I don't want to do: I could go through all my code to add a trigger call or function everywhere manually, but that's not what I'm looking for.

Why: The main reason I would like to do this automatically is that I have many input fields and many different places where I programmatically change these inputs. This will save me a lot of time if there was a way to automatically fire an event when any input was changed anywhere in my code.

Answer 1

A simple solution:

Trigger input after calling val() :

 $input.trigger("input"); 

 var $input = $("#myinput"); $input.on('input', function() { alert($(this).val()); }); $('#change').click(function() { // Change the value and trigger input $input.val($input.val() + 'x').trigger("input"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="myinput" type="text" /> <button id="change">Change value</button> 

Specific solution:

As already mentioned, you do not want to run input manually. This solution fires the event automatically, overriding val() .

Just add this to your code:

 (function ($) { var originalVal = $.fn.val; $.fn.val = function (value) { var res = originalVal.apply(this, arguments); if (this.is('input:text') && arguments.length >= 1) { // this is input type=text setter this.trigger("input"); } return res; }; })(jQuery); 

View JSFiddle Demo

PS

Pay attention to this.is('input:text') in the condition. If you want to trigger an event for other types, add them to the condition.

Answer 2

There are several ways to achieve this. Here you can use the HTML oninput() levelup event, which occurs immediately after changing an element and calling a function.

 <input id="myinput" type="text" oninput="sample_func()" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

.

 var input = $("#myinput"); function sample_func(){ alert(input.val()); } $('#change').click(function() { input.val(input.val() + 'x'); }); 

---

Or is it jQuery, an input thing (just related to the above example).

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

.

 var input = $("#myinput"); input.on("input", function() { alert(input.val()); }); $('#change').click(function() { input.val(input.val() + 'x'); }); 

---

You can also use javascript setInterval() , which constantly works with a given time interval. This is only optional and better if you are running a time-related program.

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

.

 var input = $("#myinput"); setInterval(function() { ObserveInputValue(input.val()); }, 100); $('#change').click(function() { input.val(input.val() + 'x'); }); 

Answer 3

There seems to be no way other than using .trigger() .

Try using the same using the .change() event:

 var $input = $("#myinput"); $input.on('change paste keyup', function() { alert($(this).val()); }); $('#change').click(function() { $input.val($input.val() + 'x').trigger("change"); }); 

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Or you need to call it manually:

 $('#change').click(function() { $input.val($input.val() + 'x').trigger("input"); }); 

Excerpt

 var $input = $("#myinput"); $input.on('input', function() { alert($(this).val()); }); $('#change').click(function() { $input.val($input.val() + 'x').trigger("input"); }); 

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 4

JQuery listeners only work with actual events in the browser, and they don't throw when programmatically changed.

You can create your own miniature jQuery extension for the proxy server so that you always trigger the event, but only have to do it in one modular place, for example:

 $.fn.changeTextField = function (value) { return $(this).val(value).trigger("change"); } 

Then just call your new function when you want to update the text field, instead of using the jQuery 'val' function:

 $("#myInput").changeTextField("foo"); 

Here is the version working with the proxy function:

  <!DOCTYPE html> <html> <head> <title>Test stuff</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> </head> <body> <input id="myInput" type="text" /> <button id="myButton">Change value</button> <script type="text/javascript"> $.fn.changeTextField = function (value) { return $(this).val(value).trigger("change"); } $( document ).ready(function() { var $input = $("#myInput"); $input.on("change", function() { alert($input.val()); }); $('#myButton').click(function() { $("#myInput").changeTextField("foo"); }); }); </script> </body> </html> 

For reference, this question really has already been given here: Why doesn't the jquery change event fire when I set the select value with val ()?

and here: jQuery event detection program change

Answer 5

 var $input = $('#myinput'); $input.on('input', function() { // Do this when value changes alert($input.val()); }); $('#change').click(function() { // Change the value $input.val($input.val() + 'x'); }); 

 <input id="myinput" type="text" /> <button id="change">Change value</button> <script src="*https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js*"></script> 

Answer 6

The trigger does not work for. Event creation and dispatching with native JavaScript did their job.

Source: stack overflow

  <script type="text/javascript"> $.fn.changeTextField = function (value) { return $(this).val(value).dispatchEvent(new Event("input", { bubbles: true }); } $( document ).ready(function() { var $input = $("#myInput"); $input.on("change", function() { alert($input.val()); }); $('#myButton').click(function() { $("#myInput").changeTextField("foo"); }); }); </script> 

Answer 7

 $input.val($input.val() + 'x') $input.trigger('change'); 

The change event is triggered only when the input is blurred.