We Keep Coding

dynamic input on change jquery

I have a dynamic input field which is being generated like this
var field = '<tr><td><input type="text" name="program_id" data-id="'+val['program_id']+'" value="'+val['program_id']+'">'+programBtn+'</td></tr>';
$('#transaction').append(field);
$('#transaction').on('change', 'input',function() {
console.log('hi');
});
And i have a button that when i click, it will input data into that input field using
$('.button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input:'+id).val(text);
});
Ok if i click the button it will fill in those values but console.log('hi') isnt firing. But if i type in the text box and then i leave focus it, i can see console.log('hi') is firing. Note that code here is just an example.
My Jquery version is 3.2.1

You need to trigger change function as soon as you change the input value since change fn will be triggered only when the user changes the value manually and losses the focus.
you can trigger that using .trigger('change') or change()
var field = '<tr><td><input type="text" name="program_id" data-id="11" value="test"></td></tr>';
$('#transaction').append(field);
$('#transaction').on('change','input',function() {
console.log('hi');
});
$('button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input[data-id="'+ id +'"]').val(text).change();
//$('#transaction').find('input[data-id="'+ id +'"]').val(text).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="transaction">Transaction: </div>
<button data-text="Some Text" data-id="11">Click</button>

I think you're finding input element that has data-id with value equal to data-id on the clicked button. If that so, you might use
$('#transaction').find('input[data-id="+ id +"]')
And from previous topic. onchange only fires when the user types into the input and then the input loses focus. So, you need to trigger the event manually.
$('.button').on('click', function() {
var text = $(this).data('text');
var id = $(this).data('id');
$('#transaction').find('input[data-id="+ id +"]').val(text).change(); // trigger change event
});

Check if textbox goes empty after having a value without submitting form or pressing outside of the textbox

I have a currency exchange in my backend, I post data from my textbox to the currency exchange using ajax and view the exchanged value in a label, which is otherwise hidden.
The problem is, if I enter a value in the textbox, and then erase the value from the textbox, the latest value is still there ( I want to hide the label again when the textbox is empty )
This is the code I've tried so far:
$('#transferAmount').on('change',function () {
var amount = $('#transferAmount').val();
if (amount.length < 1 || amount === ""){
$('#amountExchangedHidden').hide();
}
});
I've tried with "on-input" aswell, but it didn't work. Does anyone have a good solution to this?

Use input event instead of change event as change event handler will only be invoked once focus in the input field is lost.
The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.
$('#transferAmount').on('input', function() {
var amount = $(this).val();
$('#amountExchangedHidden').toggle(!!amount.length);
}).trigger('input'); //`.trigger` to invoke the handler initially
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" id='transferAmount'>
<input type="text" id='amountExchangedHidden'>

Use blur Event instead of Change
$(function) {
$('#transferAmount').on('blur',function () {
var amount = $('#transferAmount').val();
if (amount.length < 1 || amount === ""){
$('#amountExchangedHidden').hide();}
});
});

Changing input value on input, without affecting change listener?

I have a text input. It has a change and an input listener. In the input listener, I delete the value of the input, if it is "delete". The change listener simply alerts "Changed.".
Current behaviour:
There is no "Changed." alert when I type "delete" and stop editing, because the comparison base is changed as well.
Desired behaviour:
I want to see the "Changed." alert based on the value at the start of the editing, ignoring all the programatic changes made during the modification.
What is the simplest way of doing this?
Playgorund:
Click the input.
Delete the content.
Type "delete".
See how the text is deleted.
Click somewhere else.
See how the "Changed." alert is not displayed.
var input = document.querySelector('input');
input.addEventListener('change', function() {
alert('Changed.');
});
input.addEventListener('input', function() {
input.value = input.value.replace(/^delete$/, '');
});
<input value="example" />

My current solution is to add an attribute that I store the initial value in on each focus event, and compare it to the current value at the time of the blur event.
var input = document.querySelector('input');
input.addEventListener('focus', function() {
this.setAttribute('data-value-on-focus', this.value);
});
input.addEventListener('blur', function() {
if (this.getAttribute('data-value-on-focus') !== this.value) alert('Changed.');
});
input.addEventListener('input', function() {
this.value = this.value.replace(/^delete$/, '');
});
<input value="example" />

Javascript double alerts after onclick

I have three checkboxes in array. I handle every click of user and add value of checkbox into array. For example, page have been loaded, user have been clicked on a1, then values contains a1. If user clicks a1 and a3, values contains a1,a3 etc...
If I click into checkbox square, it works ok, but if I click on text of checkbox, js alerts two versions of array - previous(I don't need this!) and actual. Can anyone help?
Fiddle: https://jsfiddle.net/94bdepx0/
Markup
<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a1" type="checkbox">a1 text</label>
<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a2" type="checkbox">a2 text</label>
<label class="checkbox-button"><input autocomplete="off" name="tag[]" value="a3" type="checkbox">a3 text</label>
JS
$(".checkbox-button").bind("click", function (event) {
var values = $("input[name='tag[]']:checked").map(function () {
return this.value;
}).get();
alert(values);
});

Here you are:
$(".checkbox-button input").bind("click", function(event) {
var values = $("input[name='tag[]']:checked").map(function() {
return this.value;
}).get();
alert(values)
})
Your problem is that you select wrong element. You should select input instead of the label
The updated version is here: https://jsfiddle.net/94bdepx0/1/

Your click event is bound to the label. If you bind it to the checkbox, the double alert goes away.
$("input[type=checkbox]").bind("click", function(event) {
var values = $("input[name='tag[]']:checked").map(function () {
return this.value; }).get();
alert(values)
})

Instead of listening for a 'click' on the parent element, listen for 'change' on the input itself.
$(".checkbox-button").bind("click", function(event) {
...
});
becomes:
$(".checkbox-button input").bind("change", function(event) {
...
});

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