I have 5 checkboxes and 1 textarea in my form and would like to just hook OnChange() for all of these. However, for whatever reason nothing I have found on Stack Overflow seems to be getting called.
As this is the most basic example I found, what is wrong with this?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script type="text/javascript">
$(document).ready(function()
{
$("input").on("input", function()
{
alert("CHANGED");
});
}
</script>
you should handle change event:
$('input:checkbox,textarea').change(function () {
alert('changed');
});
The oninput event is only triggered when the text of an input changes, so it won't be fired for checkboxes. Try binding to the change event for checkboxes and the input event on textareas:
$("textarea").on("input", yourFunction);
$("input:checkbox").on("change", yourFunction);
function yourFunction() {
alert("CHANGED");
}
jsFiddle which demonstrates the above.
Note: The difference in this answer is the alert is triggered immediately in the textarea, not only on blur of the element.
Additional Note: The oninput event isn't supported in < IE9
Why you bind input event for checkbox, it's only fire for textarea?
You need to bind change event :
Try this one:
Updated
$(document).ready(function()
{
$("textarea").on("input", function(){
alert("CHANGED");
});
$("input").on("change", function(){
alert("CHANGED");
});
});
Try in fiddle
Checkboxes usually used with same name property so in selector name property will be usefull
$("input[name='interests']").change(function(){
/*some code*/
});
It will not work on textarea . you can assign all radio button and textarea a same class and then
$(".your_class_name").on("change", function()
{
alert("CHANGED");
});
Related
I want to trigger an event on a disabled input. I have tried the following code, nothing happened - there was no error, the even just didn't fire.
$(document).on('click', '.select-row', function(e){
...
});
How do I fix this?
You can't fire any mouse event like click on a disabled HTML element. Alternative of this, is to wrap up the element in a span or div and perform the click event on those.
$("div").click(function (evt) {
// do something
});
One more alternate is to make the element readonly instead of disabled, but bear in mind that jQuery does not have a default :readonly selector.
If it works for you, you may use readonly instead of disabled. Then you can use the click event with ease.
Demo
We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenter event to achieve that
var doThingsOnClick = function() {
// your click function here
};
$(document).on({
'mouseenter': function () {
$(this).removeAttr('disabled').bind('click', doThingsOnClick);
},
'mouseleave': function () {
$(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
},
}, '.select-row');
This my solution
<div class="myInput"><input type="text" value="" class="class_input" disabled=""></div>
Jquery:
$("body").on("click", ".myInput", function(e) {
if($(e.target).closest('.class_input').length > 0){
console.log('Input clicked!')
}
});
If you need to trigger, use trigger() function.
$('.select-row').trigger('click');
I am unable to trigger the change of the text in the current scenario.
If i click on the button i am changing the content of the text. So how can i trigger the change of the text which is caused by external event.
For example in a click of a button I can able to fill any text in the textbox, able to paste texts and using mouse and keyboard. In these all scenarios and scenarios like these also I want the event to be fired.
I have already tried the following.
$('#text_id').on('change', function () {
alert('This is not trigged when i changed the text');
});
The alert should come when the text is changed. There might be many possible sources to change the text.
This is the Fiddle i created.
Thanks in advance.
This is my updated fiddle
Updated Fiddle - http://jsfiddle.net/upa2A/1/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed')
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
Issues in original Fiddle -
Code has to be inside $(document).ready()
Missing () after function
Incorrect use of $.on (Read more about it on http://api.jquery.com/on/)
Edit based on comment from asked -
Updated Fiddle - http://jsfiddle.net/upa2A/4/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed').change();
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
More edit based on comments thread -
From http://api.jquery.com/change "but for the other element types the event is deferred until the element loses focus."
Since, when changing via button click, text box wasn't focussed, the trigger does not happen automatically.
I saw your code in jsfiddle. you missed in some brackets and semicolon . otherwise ur code write . pls check jquery library code.
$('#button_id').on('click',function()
{
$('#text_id').val('TExt changed');
}
);
$('#text_id').on('change',function() { alert('This is not trigged when i changed the text');
} );
Try the below code. But for this you should use jQuery. It'll raise the event whenever the text changed.
$('#text_id').on('input propertychange paste', function() {
alert('Text Changed');
});
the working fiddle is here
This event surely raised on text change. If it is not useful for you surely someone else will be happy for this.
var txtVal = '';
setInterval(function() {
if ($("#text_id").val() != txtVal) {
txtVal = $("#text_id").val();
alert("Text Changed");
}
}, 10);
working fiddle is here
I want to programmatically check a checkbox and trigger the checkbox's onchange function
I have tried ("#myCheckbox").click() but it only checks it and does not call its onchange function
How can I get the onchange function to execute as well?
edit:
When the document is ready i need the checkbox checked and its on change function called programatically.
Your change listener needs to be set before you trigger the click on the checkbox. The following code works with no issues:
$("#myCheckbox").on('change', function(){
console.log('Change');
}).click();
JSFiddle
How about something like this:
$('#myCheckbox').prop({ checked: true });
theOnchangeFunction();
$('#myCheckbox').on('change', theOnchangeFunction);
function theOnchangeFunction(){
}
you can try like below
$("#scheck").attr('checked', 'checked').change();
it will check the check box as well trigger onchange event for checkbox
ex:
Script :
$(document).ready(function () {
$("#scheck").attr('checked', 'checked').change();
});
function checkitout() {
alert("onchange event fired");
}
HTML :
<input type="checkbox" name="tdcheck" id="scheck" onchange="checkitout();" />
Don't understand, it works : http://jsfiddle.net/FW5Lp/
<input type="checkbox" id="myc">
<button id='clic'>click</button>
$('#myc').on('change', function(){alert('ca change');});
$('#clic').on('click', function(){$('#myc').trigger('click') });
Try both events by using on() like,
("#myCheckbox").on('click change',function(e){
alert(e.type);
})
The page is here:
http://cistrome.org/cps/seqconfig?did=2693
And the original js codes are below(this one works well):
$(document).ready(function(){
$(".open_gene").on('change', function(event) {
$('#Gene_field').show();
});
$(".close_gene").on("change", function(event){
$("#Gene_field").hide();
});
});
So the .close_gene has an event handler for change. But when I want to trigger this event manually to hide the #Gene_field, like this:
>>> $('.close_gene').trigger("change")
In FireBugs, the returned value is:
[input#nolimit_radio.close_gene all]
But the #Gene_field is not hidden..
I was wondering that why I can't trigger change event which should already bind to function(event){ $("#Gene_field").hide();}. Does anyone have ideas about this? Thanks!
Try this:
$(".close_gene").click();
Its working fine for me in Firebug Console... :)
Update:
This should also work, but will not change the state of radio button
$(document).ready(function(){
$(document).delegate(".open_gene",'change', function(event) {
$('#Gene_field').show();
});
$(document).delegate(".close_gene", "change", function(event){
$("#Gene_field").hide();
});
});
$('.close_gene').trigger("change");
I am using the following code to sync 2 input boxes.
$("#input_box_1").bind("keyup paste", function() {
$("#input_box_2").val($(this).val());
});
The above works great but I need to do the same for a checkbox.
My question is...how do I modify the code for it to work with a checkbox?
You need to modify the checked property according to the value of that property on the first checkbox whenever the first checkbox changes (so we bind to the change event):
$("#checkbox1").change(function() {
$("#checkbox2").prop("checked", this.checked);
});
Note that you don't need to pass this into jQuery, you can just access the property of the raw DOM element, which is faster.
Try something like:
$("#input_box_1").on("change", function() {
$("#input_box_2").prop('checked', $(this).prop('checked'));
});
Use attr('checked') instead of val()
$("#input_box_1").bind("keyup paste", function() {
$("#input_box_2").attr('checked', $(this).attr('checked'));
});