We Keep Coding

Change function on Javascript/jQuery

I have a textfield, and I want the field to be disabled or read only if I change text on the field. But, before that, I can't make change function. I don't know why.
I have tried this code :
$("#submitOrder_cust_id_name").click(function () {
alert("Test");
});
and when I click the field it is working.
But, when I use this code
$("#submitOrder_cust_id_name").change(function () {alert("Test");});
or this code
$("#submitOrder_cust_id_name").on('change', function () {
alert("Test");
})
it doesn't work at all.
Please help. Thanks.

jquery change event trigger only when hit enter on the text box. If you want to trigger a event when you enter any character use "keypress" instead of "change"
Refer this :
https://www.w3schools.com/jquery/event_keypress.asp

use on 'change':
$('#submitOrder_cust_id_name').on('change', function () {
alert('test');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

Try using .blur(). This will be called when the input field loses focus:
$('#submitOrder_cust_id_name').on('blur', function () {
alert('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="submitOrder_cust_id_name" />

How to trigger an event when the user clears the text field and focus out of the text field using Jquery?

I need to write an event handler when user clears the text field and moves out of focus from the same.
I'm using the following function to catch "focus out" event.
$("input[type=text]").blur(function () {
}
I have the followingfunction to capture clear field event.
$("input[type=text]").keyup(function() {
if (!this.value) {
}
}
I tried using the keyup() function inside blur() since I need to capture the focus out and then clear field. This is how my code looks like:
$("input[type=text]").blur(function () {
$(this).keyup(function() {
if (!this.value) {
}
}
}
But it doesn't work. Clear field event is triggered even before focus is out of the field. Also, it is triggering the event multiple times. What is the problem here?

I think that is more simple:
$('input').on('blur', function(e) {
if(!$(this).val()) {
// IS NO VALUE IN THE INPUT
$(this).trigger('blur'); // trigger the blur event
}
});

Here you are:
$("input[type=text]").on('blur', function() {
alert('blur');
});
$("input[type=text]").on('input', function() {
if (!$(this).val()) {
alert("input nothing");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
Hope this helps.

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');
}
});

Only use .on() for radio buttons that aren't disabled

I have the following code that run's when a radio button is clicked on. However I am trying to change it so it only runs if the radio button that is being clicked is NOT disabled.
Could anyone help me with this?
$('#divName').on('click', 'input[type="radio"]', function(event) { }

One way would be the use of :not()
$('#divName').on('click', 'input[type="radio"]:not([disabled])', function(event) { }
another would be to exit the function immediately if it is inactive..
$('#divName').on('click', 'input[type="radio"]', function(event) {
if (this.disabled) return;
});

You could use the :enabled selector:
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }
But depending on what exactly you want to do, you might want to use the change event instead:
$('#divName').on('change', 'input[type="radio"]', function(event) { }

how about (not tested):
$('#divName').on('click', 'input[type="radio"]:enabled', function(event) { }

Prevent onclick execution with jquery

UPDATED
Html Code:
<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />​
JS Code:
$(document).ready(function() {
$("#btn").click(function() {
if ($("#textbox").val().length == 0) {
alert("Validation error");
return false;
}
}).prop("onclick", null );
})​
I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?
P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.
Thanks!
JSFiddle http://jsfiddle.net/B5GWx/12/

$(document).ready(function() {
$("#btn").click(function() {
alert("Want to show only this message");
return false;
}).prop("onclick", null );
})​
http://jsfiddle.net/B5GWx/5/

You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.
What you can do, though, is remove the DOM0 handler entirely:
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
alert("Want to show only this message");
return false;
});
btn[0].onclick = null; // <==== Here
})​;

Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
}).prop("onclick", null );
})​
DEMO

You are looking for preventDefault
Description: If this method is called, the default action of the event will not be triggered.
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
e.preventDefault();
})
})​