I have this coding on a check box:
<input type="checkbox" name="ECVValve" id="ECVValve" onChange="setEcvcheck();">
The check box can also be checked by another function (activated under certain conditions) that looks like this.
function setEcvcheck() {
if (document.getElementById("ECVValve").checked) {
document.getElementById("ECVValve").checked = false;
} else {
document.getElementById("ECVValve").checked = true;
}
}
It appears that if the checkbox is "checked" by the function setEcvcheck, the onChange event is not fired. Is that how it works or am I missing something else?
I think there is a loop of checking and un-checking in the code.. because each time you change it to true, it will call the onChange, then it will come back to function and set it to false.
Are you trying to check and un-check the same checkbox? (ECVValve)?
Actually, the event is firing. When you click, you check it, your javascript code unchecks it. And you'll never get to check the checkbox. You don't need to write javascript code to check or uncheck. To be sure it's firing, try this:
function setEcvcheck() {
alert('Ok!');
}
you can programatically fire the onchange event of check box.
in the following code, when button clicked toggle the check box and force to fire the onChange event of it.
function test() {
console.log("test");
}
function btnclick() {
var x = document.getElementById("1");
x.checked = !x.checked;
document.getElementById("1").onchange()
}
<input type="checkbox" onChange="test()" id="1">hi
<button onClick="btnclick()">btn</button>
Related
I have an input field and a button. It is necessary that when the button is clicked the input field gets focus.
I need the behaviour to be slightly different depending on whether the input field was focused manually by the user or if it was focused due the button being clicked.
It seems this would be relatively simple, but I couldn't come up with a solution so far. Any ideas very welcome.
$("button").click(function() {
target_input = $("input");
target_input.focus();
});
$("input").focus(function() {
// if focus done manually by user
// do something
// if focus done via button
// do something else
});
Here is a solution that uses no extra variables, instead it checks the event.
$("button").click(function() {
target_input = $("input");
target_input.focus();
});
$("input").focus(function(e) {
// if focus done manually by user
// do something
// if focus done via button
// do something else
if(e.originalEvent.relatedTarget){
// only from button events
}
// here is from all events
});
this e.originalEvent.relatedTarget will return null if we didn't use the button to originate the focus.
remember to add e to the function.
You should be able to use Event.isTrusted for this:
The isTrusted read-only property of the Event interface is a boolean
that is true when the event was generated by a user action, and false
when the event was created or modified by a script or dispatched via
dispatchEvent.
$("input").focus(function(e) {
if(e.isTrusted) {...} else {...}
});
As noted in the comments, neither IE nor Safari like this.
This works without global variables and it is cross-browser working solution:
$('button').click(function () {
$(this).prev('input').focus()
})
$('input').click(function (e) { // yes, listen to click instead
// original event exists only if input was clicked directly
if (e.originalEvent) {
console.log('manually triggered')
}
})
<div style="background-color: yellow;">
<input type="text">
<button>Focus input</button>
<br>
<input type="text">
<button>Focus input</button>
</div>
<script src="https://unpkg.com/jquery"></script>
Is there some way to run a function when a input is disabled/enabled from another part of the code, for example when this code is run:
$('#myinput').prop('disabled', true);
I want another part of the code to be notified about this, but without making it dependent on the other part. Something similar to how "change" event works. But there's no "disabled" event...
You can call notification trigger in the next line with an if statement
document.getElementById("email").disabled=true;
if(document.getElementById("email").disabled == true)
{
alert("Notifying..");
//call the trigger function
}
There is no event that will trigger when those properties are changed.
You can do this some other way.
Set hidden field for this enable disabled value like 1 / 0
$("#hiddenid").trigger("hiddenidchange");
$("#hiddenid").on("hiddenidchange", function () {
});
refer How do I trigger an onChange event for a hidden field?
checkbox can not checked or uncheck by directly click on checkbox ?
i was create click on div for toggle checked/unchecked checkbox. this function was best.
But when i tried to click on checkbox directly, i can not check or uncheck checkbox.
How can i do that ?
https://jsfiddle.net/jddwxtst/
<script>
function onclick_cover_checkbox_fn(){
var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;
if(main_checkbox_checked_uncheck_var_checked_status != true)
{
document.getElementById("main_checkbox_checked_uncheck").checked = true;
checked_all_or_uncheck_all_fn();
}
else
{
document.getElementById("main_checkbox_checked_uncheck").checked = false;
checked_all_or_uncheck_all_fn();
}
}
</script>
<script>
function checked_all_or_uncheck_all_fn(){
alert("5555");
}
</script>
Here is a example in jquery:
Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Here's a fiddle
here is the updated working example https://jsfiddle.net/jddwxtst/2/
problem is when you directly click on the checkbox it first run checked_all_or_uncheck_all_fn() method but then it execute onclick_cover_checkbox_fn() method too (you don't need) because div also receive click event.so if you check then method onclick_cover_checkbox_fn() method will uncheck it .to avoid this you shroud stop event propagating in checked_all_or_uncheck_all_fn() method.
function checked_all_or_uncheck_all_fn(e){
alert("5555");
// stop event propagating
}
for cross browser stop propagating read this http://javascript.info/tutorial/bubbling-and-capturing
I have this switch below:
<input id="upperLightSwitch" type="checkbox" checked data-size="mini">
With this, switchChange (on change) event in the $(document).ready triggers fine when the switch state is changed by clicking on it.
$('#upperLightSwitch').on('switchChange.bootstrapSwitch', function (event, state) {
sendStateToArduino("upperLight");
updateLightState("upperLight",state);
});
My problem is when I check a value from the database and it is 0. I am setting the toggle switch state to false and setting the 3rd parameter to false which says to not fire the event on change, but the event still triggers as both methods in the event above are being executed.
Quote from Bootsrap website:
$('#toggle-state-switch').bootstrapSwitch('state', false, false); // Set the state as off and do not trigger switchChange event
The one I am using
$('#upperLightSwitch').bootstrapSwitch('state', false,false );
Before the code of the event, I am calling a method to check that value with the database when everything loads.
What am I missing?
EDIT: Bootstrap switch link
The last parameter should be true not false, like below to disable the event from triggering
$('#upperLightSwitch').bootstrapSwitch('state', false,true );
You can't do it with "out of the box" javascript (methods), but there is a pretty simple work around!
Here's what I did... (which works great!)
In your document ready
$(document).ready(function () {
//declare a flag.
$.onC = 0;
Then when you're setting the Toggle/Switch...
function yourFunction()
{
//first set the flag.
$.onC = 1;
$(th).bootstrapToggle('off');
}
Now in the change function...
$(".onOff").on("change", function (e) {
//check the flag and reset it
if ($.onC == 1)
{
$.onC = 0;
return;
}
I am using Jquery, for selecting value of drop-down.
I need do do some action on OnChange event (.change in jQuery) , but if there is only one option in drop-down I am not able to capture it in onChange event.
My drop-down is formed dynamically, so don't know how many options I'll get how many options, but I am facing problem if there is just one option.
Is there any way to capture OnChange event for <select> with only one <option>?
You don't need to have an onchange event. Just have a function that gets called from onchange, and if there is only one item, just go ahead and call that function.
function populate() {
//do work to populate #selector
if($("#selector option").length == 1) {
$("#selector").hide();
workerFunction();
} else {
$("#selector").show();
}
$("#selector").change(workerFunction);
//the following line of code will work like a default:
workerFunction();
}
function workerFunction() {
//put whatever used to be in your onChange function here
}
onchange event occurs when the internal state of the element is changed. Since you have a dropdown with a unique value, its state is never changed so the event is not fired.
<label for="checkboxThatUsedToBeASelect">
<input type="checkbox" id="checkboxThatUsedToBeASelect" name="checkboxThatUsedToBeASelect" value="something" />
</label>
$('#checkboxThatUsedToBeASelect').change( function(){
});
Now you have a more user-friendly input, and it'll trigger the change when it is checked or unchecked. :D
How about a conditional event binder? Something like:
var changeHandler = function (method) {
alert(method);
};
if ($('select option').length > 1) {
$('select').change(function() {
changeHandler('change');
});
} else {
$('select').click(function() {
changeHandler('click');
});
}
It sounds like you have a HTML error in your options tags.
In addition to that, in order to target something created dinamically with jQuery, you have to use delegators.
$('selector').change( function(e){...}); // without delegator
$('body').on('change','selector', function(e){...}); // with delegator, it detects even an element added dinamically
This said, you should be abble to detect on change for new and old elements
.change looks for another inmate to switch places. in your case sadly, there is a home alone case and hence the event is not firing.