Detect if a field is updated with JavaScript or jQuery - javascript

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">

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">

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

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">

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">

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.

Related

Handle dialog-close event on input type='color'

Here is a default(html5) color selector:
<input id='color-picker' type=color value='#ff0000'>
By click on the element, a default color-picker dialog opens.
I can easily track the color change event:
$('#color-picker').on('change', function() {
console.log($(this).val());
});
How dialog window close event can be handled? For example, when user clicks Cancel button?
Here is jsfiddle additionally.
Unfortunately, the exact functionality is not possible. I even read through the stack link, it seems that file calls the change event regardless of change, whereas color does not... So, I added the code to the blur event instead. When the user click off the value after editing color for any reason, it will check for cancel. I added a phony submit button to force the user to do it.
$('#color-picker').on('blur', function() {
if ($(this).data("prevColor") == $(this).val()) {
console.log('cancelled');
} else {
//value changed
}
updateData.bind(this)();
});
function updateData() {
$(this).data("prevColor", $(this).val());
}
updateData.bind($("#color-picker"))();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>
I've used this for the Cancel and Close Events.
var prevColor;
$('#color-picker').onchange = function(){
if (this.value != prevColor){
prevColor = this.value;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='color-picker' type=color value='#ff0000'><button>Submit</button>

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.
Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works
Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

Jquery on Input not working on dynamically inserted value

I'm trying to alert a value using jquery when it is generated from a javascript code, the value is generated on the input box the problem is jquery cannot detect the changes, commands i tested are "change, input" but when i manually input a value jquery triggers
sample code:
value is dynamically generated on the javascript and pushed / inserted to the inputbox, the value is not manually generated
javascript:
document.getElementById("displayDID").value = DisplayName ;
html:
<input type="text" id="displayDID" />
jquery:
$('#displayDID').on("input" ,function() {
var work = $(this).val();
alert(work);
});
the value of the id="displayDID" changes but jquery cannot detect it after execution.
sample fiddle http://jsfiddle.net/SU7bU/1/
add trigger to it
$('#gen').on('click',function() {
$('#field').val('val').trigger("change");
});
$(document).on("change",'#field' ,function() {
var work = $(this).val();
alert(work);
});
http://jsfiddle.net/ytexj/
It is because you have added the script before input is ready.Due to which, event is not getting set on that element.write the code on document ready:
$(document).ready(function(){
$('#displayDID').on("input" ,function() {
var work = $(this).val();
alert(work);
});
})
or use event delegation:
$(document).on("input",'#displayDID' ,function() {
var work = $(this).val();
alert(work);
});
Ok I will propose you one answer and let's see if it solve your problem.
If you use keyup, and you insert 3350 value, you will display 4 alert, and I think you want to display only 1 alert.
$(document).ready(function() {
var interval;
$("#variazioneAnticipo").on("input", function() {
var variazioneAnticipo = $("#variazioneAnticipo").val();
clearInterval(interval);
interval = setTimeout(function(){ showValue(variazioneAnticipo) }, 1000);
});
});
function showValue(value) {
alert("ANTICIPO VARIATO: " + value);
}
<input id="variazioneAnticipo" class="rightAlligned form-control" style="width: 60%" type="number" step="0.01" min="0" value="3" />
I explain it, when you input anything into the input, will trigger a setTimeout in 1 sec, if you press another key under this time, we clear the timeOut and we triiger again, so you will only have 1 alert 1 sec after the last input insert.
I hope it helps you, and soyy for my english :D

What event is triggered when the value of an input field is changed?

I'm using a JavaScript library that occasionally changes the value of an input field. I want to detect when that happens.
Apparently, the change and input events are not triggered when the value of an input field is changed (at least not on Chrome).
To verify that, I have tried this (using jQuery):
<script>
$(function() {
$('#inp').on('change',function() { console.log('change event'); });
$('#inp').on('input',function() { console.log('input event'); });
$('#inp').val('hello');
});
</script>
<input type="text" id="inp">
Neither the change event nor the input event is triggered when I call .val('hello').
How can I detect the change? (Please remember that the code that changes the value is outside my control, so I cannot add a call to trigger() there.)
There is a work around, you can pool the value of textbox after regular intervals and trigger the event when it is changed.
Live Demo
$('#elementId').change(function(){
alert("changed");
});
var previousVal = "";
function InputChangeListener()
{
if($('#elementId').val() != previousVal)
{
previousVal = $('#elementId').val();
$('#elementId').change();
}
}
setInterval(InputChangeListener, 500);
$('#elementId').val(3);
Edit based on comments for many elements.
You can use array and monitor, 30 element wont be a performance concern
Live Demo
$('.someclass').change(function(){
alert("changed, id >> " + this.id);
});
var hashTablePrevElem=[];
$('.someclass').each(function(){
hashTablePrevElem[this.id] = this.value;
});
function InputChangeListener()
{
$('.someclass').each(function(){
if(hashTablePrevElem[this.id] != this.value)
{
hashTablePrevElem[this.id] = this.value;
$(this).change();
}
});
}

Jquery - call function when blur+clicking certain element?

I want to call a function when a certain field gets blurred, but only if a certain element is clicked. I tried
$('form').click(function() {
$('.field').blur(function() {
//stuff
});
});
and
$('.field').blur(function() {
$('form').click(function() {
//stuff
});
});
But neither works, I reckon it's because the events happen simultaneously?
HTML
<form>
<input class="field" type="textarea" />
<input class="field" type="textarea" />
</form>
<div class="click-me-class" id="click-me">Click Me</div>
<div class="click-me-class">Click Me Class</div>
jQuery
$('.field').blur(function() {
$('#click-me').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// Place code here
console.log("Hello");
}
$(this).unbind(e);
});
});
You can test it out here: http://jsfiddle.net/WfPEW/7/
In most browsers, you can use document.activeElement to achieve this:
$('.field').blur(function(){
if ($(document.activeElement).closest('form').length) {
// an element in your form now has focus
}
});
I have edited my answer because we have to take into account that the event is asigned every time.
It is not 100% satisfactory, and I don't recommend this kind of complicated way of doing things, but it is the more approximate.
You have to use a global variable to take into account the fact that the field was blurred. In the window event, it is automatically reset to 0, but if the click on "click-me" is produced, it is verified before the window event, becase window event is bubbled later, it happens inmediately after the "click-me" click event
Working code
$(window).click(function(e)
{
$("#result").html($("#result").html()+" isBlurred=0<br/>");
isBlurred=0;
});
var isBlurred=0;
$('.field').blur(function() {
$("#result").html($("#result").html()+" isBlurred=1<br/>");
isBlurred=1;
});
$('#click-me').click(function(e) {
if(isBlurred==1)
{
$("#result").html($("#result").html()+" clicked<br/>");
}
});
".field" would be the input and "#click-me" would be the element clicked only just once.

Categories