0

I have a very extensive template, and there is a form that updates the value of a text field with JavaScript or jQuery, this function has not been able to locate it, and I need to detect when this field is updated, I have tried with all these functions, but it is not detecting when it is updated.

What is the reason why it is not detected when the field is updated from JavaScript but is detected when updated when I write and click outside the field?

Important: The value 90,000 "that is added dynamically, makes it a specific function, which I have not been able to find, and is to try to detect if the value changed with JavaScript.

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated
 */
$('input#long').on('change', function(){
  alert("Updated");
});

$(':input').on('change', function(){
  alert("Updated");
});

$('input#long').change(function(){
  alert("Updated");
});

$(document).on('change', 'input#long', function(){
  alert("Updated");
});  

$(document).on('change', 'input', function(){
  alert("Updated");
}); 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
halfer
  • 19,824
  • 17
  • 99
  • 186
Learning and sharing
  • 1,378
  • 3
  • 25
  • 45
  • 3
    `$('#long').val('90.000').trigger('change')` should do it. The DOM event won't be triggered if the value is changed via JS. – Jeto Aug 31 '18 at 17:46
  • Possible duplicate of [I set field value w/ javascript, onchange not triggered. Alternative solution?](https://stackoverflow.com/questions/14085251/i-set-field-value-w-javascript-onchange-not-triggered-alternative-solution) – Luca Kiebel Aug 31 '18 at 17:47
  • It kind of sounds like you want `keyup` event instead of `change`. – Shelby115 Aug 31 '18 at 17:48
  • The issue is that this value of 90,000 is automatically added after an AJAX request is made when you click on a button, and I can not find that function or action to file that trigger, it is a very extensive and complex Wordpress template , it is easier for me to try to detect by Javascript if this value changes. – Learning and sharing Aug 31 '18 at 17:49
  • @Learningandsharing Did you try the `.trigger('change')` approach? Let me post it as an answer. – Jeto Aug 31 '18 at 17:50
  • If I have tried the trigger, but this value changes automatically and the function that makes it change I have no where to find it because the code is extremely extensive and I need to solve it very fast for reasons of time – Learning and sharing Aug 31 '18 at 17:53
  • Since value is being set by third party script one approach is to store the initial page load value then use an interval timer to keep checking for changes against the stored value – charlietfl Aug 31 '18 at 19:17

5 Answers5

1

Use keyup and paste instead of change. See keyup()

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated by key press or pasting text
 */
$(document).on('keyup paste', 'input', function(){
  alert("Updated text field");
}); 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">

change()

The change event is sent to an element when its value changes. This event is limited to input elements, textarea boxes and select elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

A l w a y s S u n n y
  • 36,497
  • 8
  • 60
  • 103
1

You can use the change method from jquery to subscribe the event.

The html

<input class="target" type="text" value="Field 1">

and the script

$(".target").change(function() {
  alert( "Handler for .change() called." );
});

See this codepen
See the jquery docs

Max
  • 6,821
  • 3
  • 43
  • 59
1

DOM events won't be triggered by JS/jQuery calls. You can easily trigger the change event manually, like this:

$('#long').val('90.000').trigger('change')

Sample:

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000").trigger('change');
}, 2000);

/**
 * Detect if that field is updated
 */
$('input#long').on('change', function(){
  alert("Updated");
});

$(':input').on('change', function(){
  alert("Updated");
});

$('input#long').change(function(){
  alert("Updated");
});

$(document).on('change', 'input#long', function(){
  alert("Updated");
});  

$(document).on('change', 'input', function(){
  alert("Updated");
}); 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • The function that adds this value $('#long').val("90.000").trigger('change'); I do not have it, and finding it is taking me a lot of time, so I had to choose the option to detect if a field is updated from Javascript, detect it by Jquery and modify that value that is added automatically. – Learning and sharing Aug 31 '18 at 18:02
1

Have you tried the keyup trigger wich fires straight when the key is released?

$(function(){

// Automatic update, strange function
setTimeout(function(){
  // Value updated automatically
  $('#long').val("90.000");
}, 2000);

/**
 * Detect if that field is updated
 */

$( "#long" ).keyup(function() {
  alert( "Handler for .keyup() called." );
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Jimmy Surprenant
  • 163
  • 7
  • It is that this value is dynamic, and the function that adds this value I do not have, and I need to find a quick way to detect if the value changes from Javascript and not with user actions. – Learning and sharing Aug 31 '18 at 18:00
  • So the input is updated via Ajax call, but you don't have access to this function, right? Because if you have access to the Ajax request, you could use the callback to achieve what you need – Jimmy Surprenant Aug 31 '18 at 18:14
  • If it is updated from the Ajax call, and the function that makes that Ajax request I have not been able to find it, if I had access to that function the topic could possibly be solved, but many graces, because they have given me a very good contribution, although I still continue looking the way to solve it – Learning and sharing Aug 31 '18 at 18:17
1

So, according to your edits/comments from other answers, you cannot trigger change manually.

A MutationObserver would be a good way to solve this, except they can't observe input value changes, as explained here.

Your only way out, as far as I can tell, is using setInterval to compare the current value with the old one every few milliseconds. A bit ugly and not optimal at all, but does the job. Here's a sample:

$(function() {
  setTimeout(function() {
    $('#long').val('90.000');
  }, 1000);
  
  $('#long').on('change', function() {
    alert('changed');
  });
  
  // Store the current value
  $('#long').data('oldVal', $('#long').val());
  
  // Every 100ms, trigger `change` event whenever new value != old
  setInterval(function() {
    if ($('#long').val() !== $('#long').data('oldVal')) {
      $('#long').trigger('change');
      $('#long').data('oldVal', $('#long').val());
    }
  }, 100);    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="long">
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • thank you very much, this would be like the closest solution to solve it, because apparently, there is no way to detect by Javascript or Jquery, if a field is updated and we do not have access to that function that updates that field dynamically, it makes sense to do it this way and create an interval that every certain time that value is checked. – Learning and sharing Sep 01 '18 at 00:57