We Keep Coding

onchange don't work on checkbox when there are multiple check

I have many checkbox with onchange event that change line color where is checked :
<input type="checkbox" onchange="cocheCommande($(this))" name="${NAME_SELECTION}" value="<%=command.getCdeId()%>" />
function cocheCommande(chk)
{
alert("test cocheCommande");
var tr=chk.closest('tr');
if (chk.is(':checked'))
{
tr.css('background','#33EE33');
tr.nextUntil("tr.entete","tr").css('background','#FFFF33');
}
else
{
tr.css('background','#D0EED0');
tr.nextUntil("tr.entete","tr").css('background','#EEEED0');
}
}
I have a function that allows to check everything or uncheck. But if I use, onchange event is never call even though everything is checked.
Why ? And how can I do ?

As others said, you can't use $ in the html template; you can, however, pass this as the argument to your onchange handler:
HTML:
<input onchange="change(this)" type="checkbox" />
JS:
function change(elem) {
var element = $(elem);
console.log(element.next())
}
https://plnkr.co/edit/dx8GoJxHwKa52VFCkn2G?p=preview

Username Length Verification jQuery

I am attempting to create jQuery form which is automatically updated every time the user clicks.
At the moment I am working on querying if the username is correct length; if it is not, it will make the input box outlined red.
This is my current code (which does not seem to function at all).
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(document).click(function(e) {
if (!$(e.target).closest('#jq-user-getval').length) {
if ( $('#jq-user-getval').val() != '' ) {
if( $("#jq-user-getval").val() < 4) {
$("#jq-user-getval").addClass('border-force');
}
}
}
})
})
</script>
as you can see, I have made it so that when the user clicks away from the input box, it will check if the box is empty. If it is empty, it will check if the length is less than 4 characters, then it is supposed to add a class forcing the red outline. This is not working, however.
this is the HTML, I am unsure if the problem lies here or not:
<form action="" method="post">
<input id="jq-user-getval jq-user-class" type="text" name="username">
</form>
I am trying to replicate Microsoft's "Hotmail" registration form, if you can suggest any changes.

Your id value is incorrect. Technically, id cannot contain spaces. Change your <input /> to:
<input id="jq-user-getval" class="jq-user-class" type="text" name="username" />
The way you are using .val() < 4 is also wrong. You cannot compare like that with a string:
"hello" < 4; // This is meaningless.
"hello".length < 4; // You should use this.
Use .blur() function for this:
$(function () {
$("#jq-user-getval").blur(function () {
if (this.value.trim().length !== 0 && this.value.trim().length < 4)
$(this).addClass("border-force");
});
});
If you are dynamically loading the <input />, then you can delegate the event this way:
$(function () {
$(document).on("blur", "#jq-user-getval", function () {
if (this.value.trim().length !== 0 && this.value.trim().length < 4)
$(this).addClass("border-force");
});
});
I have added .trim() for extra security, like people might get away putting spaces.
There's no real reason for you to use the .click() function anywhere here. The clicking away really triggers blur event on the <input />.

You can use Jquery Validation.
Basic Example :
<input id="username" name="username" maxlength="4" type="text" required>
$("#yourFormID).validate();
if input is not valid and then you addClass red outline
you must use errorPlacement,errorClass properties in validate() function

Disabled textbox change event

Short Explanation
I want to do something whenever disabled textbox value is changed
Detailed Explanation
I have a disabled text box which value is setting programitically I want to bind the change event of disabled textbox to fire some other function. This is what I tried but won't work.
$('#Rate').change(function() {
// alert("Change Event Called");
CalculateMedicine();
});
$('input[id$=Rate]').bind("change", function () {
CalculateMedicine();
});
This both thing don't work for me and the I don't like the idea to put a function CalculateMedicine() to all the place from which possibly Rate textbox is changing.So apart from this solution any help will be appreciated

assuming that your your input has disable class on on click or something else you check like this
if ($( "#input" ).hasClass( "disable" )) {
Your logics and codes here //
}
//Hope this would help

You can use triggerfor a change event:
<input type="text" disabled="disabled" name="fname" class="myTextBox" ><br>
<input type="button" name="submit" id="submit" value="Submit">
Javascript:
$(".myTextBox").change(function(){
console.log("yes i m working");
});
$("#submit").click("input", function() {
$(".myTextBox").val("New value").trigger("change");
});
Check Demo

It is possible if one redefines the value property of that input.
<html>
<head>
<script>
function Init(){
var tE = document.querySelector('input'); //Our input field.
//We redefine the value property for the input
tE._value = tE.value;
Object.defineProperty(tE, 'value', {
get: function(){return this._value},
set: function(v){
console.log(1, 'The value changed to ' + v)
this._value = v;
this.setAttribute('value', v) //We set the attribute for display and dom reasons
//Here we can trigger our code
}
})
}
function Test(){
//In one second we are going to change the value of the input
window.setTimeout(function(){
var tE = document.querySelector('input'); //Our input field.
tE.value = 'Changed!'
console.log(0, 'Changed the value for input to ' + tE.value)
}, 1000)
}
</script>
</head>
<body onload = 'Init(); Test();'>
<input type = 'text' disabled = 'true' value = 'Initial' />
</body>
</html>
https://jsfiddle.net/v9enoL0r/

The change event will not fire if you change the value programmatically
See https://stackoverflow.com/a/7878081/3052648
A not elegant possible solution:
function checkChanges(){
if(prevRate != $('#Rate').val()){
prevRate = $('#Rate').val();
alert('changed');
}
}
var prevRate;
$(document).ready(function(){
prevRate = $('#Rate').val();
setInterval(function(){
checkChanges();
} ,500);
});

You can fire change event by the following code from wherever you want to fire change event or any other event. The event will be fired either value changed or not. Just place the code after from where you are changing value programatically.
element.dispatchEvent(new Event('change'))
let input = document.querySelector("input");
input.addEventListener("change", () => alert("Change Event is Fired"));
input.value = "xyz";
input.dispatchEvent(new Event("change"));
<input type="text" disabled value="abc">

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

JQuery if certain textboxe's are empty, disable button

I've seen plenty examples of people disabling buttons if textboxes are empty but I haven't found any which will disable a button for only certain textboxes. I'm new to Jquery and I know it is pseudo coded but you can get the idea. Which Jquery function do I have to call so that it is constantly checking? And how can I use an or statement in the if clause to determine if any textbox field is empty?
if( $('#txtEvent').val.length === 0 || $("#txtID").val.length === 0)
{
$('#btnSave').attr("disabled", "disabled");
}
else
{
$('#btnSave').attr("enabled", "enabled");
}
Form Controls
<asp:TextBox ID="txtEvent" runat="server"></asp:TextBox>
< asp:TextBox ID="txtID" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" runat="server"" Text="Save and Next" />

You can do it two different ways:
if (!$("#txtEvent").val()) { //undefined will yield false
//call a method! .val() not .val
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
Or:
if ($("#txtEvent").length > 0) {
$("#btnSave").attr("disabled", "disabled");
} else {
$("#btnSave").attr("enabled", "enabled");
}
If you want these constantly running, wrap them in:
$("#txtEvent").on("change", function() { //code });
//using the onchange event will trigger the code whenever the txtbox changes.
//you can also use onblur if you want it to trigger AFTER the txtbox loses focus
Please note you'll have to convert these into proper asp code! This is simply a logistical answer.

Try
var $empties = $('#txtEvent, #txtID').filter(function(){
return $.trim($(this).val()).length == 0
})
$('#btnSave').prop("disabled", $empties.length === 0);

Even though this is two years old question, I would like to show another way using bind. See the text 'keyup mouseup cut paste'
This will also work if you cut or paste text as well as keyboard input. Also this will work if we click the little cross in the text box to clear the text( using mouseup).
OP stated that disable a button for "only certain textboxes".
Say we have following text boxes
<input type="text" name="tbox1" id="txtbox1" />
<input type="text" name="tbox2" id="txtbox2" />
<input type="text" name="tbox3" id="txtbox3" />
<input type="text" name="tbox4" id="txtbox4" />
<input type="submit" id="btnSubmit" name="button" value="Save and Next" disabled />
If we need to enable/disable the button based on values entered in to txtBox1 OR txtBox3 then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
var txt = $(this);
setTimeout(function () {
$('#btnSubmit').prop('disabled', $(txt).val() == '');
}, 100);
});
});
</script>
If we need to enable/disable the button only when both txtBox1 AND txtBox3 are not empty then we can use this
<script>
$(document).ready(function() {
$("#txtbox1, #txtbox3").bind('keyup mouseup cut paste', function () {
setTimeout(function () {
($('#txtbox1').val() && $('#txtbox3').val()) ? $('#btnSubmit').prop('disabled', false) : $('#btnSubmit').prop('disabled', true);
}, 100);
});
});
</script>