Call Javascript function only when checkbox is NOT checked - javascript

I'm trying to figure out how to call a Javascript function only when a checkbox is NOT checked.
Here is my checkbox:
<input type="checkbox" id="icd" name="icd" value="icd" />
Here is the name of the function:
planhide();

document.getElementById('icd').onchange = function() {
if ( document.getElementById('icd').checked === false ) {
planhide();
}
};​

Include onchange option in the input tag and then add an intermediate function that checks and calls planhide() accordingly as follows:
<input type="checkbox" id="icd" name="icd" value="icd" onchange=check()/>
Then define the check() to do check the state and call the function as follows:
function check()
{
if(document.getElementById("icd").checked==false)
planhide();
}
Also instead of onchange you can also use onclick on the submit button option to call the check() function as like follows:
<input type="button" onclick=check()/>

$(document).ready(function () {
$('#icd').change(function () {
if (!this.checked) {
planhide();
}
});
});

just register an onchange handler on your input, check the 'checked' property when the handler is call, and call the method if checked is false.
Here is a fiddle.

Related

How to get element from DOM and set onclick event?

I have this html element:
<table id="miniToolbar">
<tbody>
<tr><td>
<button id="btnStrView" type="button" onclick='parent.ExecuteCommand()' class="button_air-medium">
<img id="streetView" class="miniToolbarContant" src="../stdicons/streetview-icon.png"></button>
</td></tr>
<tbody>
</table>
as you can see inside button I have on click event:
onclick='parent.ExecuteCommand()'
And I have this JS function:
function isMenuItemMasked(item)
{
var funcId = '75';
var elem = document.getElementById('btnStrView');
return false;
}
as you can see inside function I have variable called funcId.
I need to put this funcId to the on click event:
onclick='parent.ExecuteCommand('75')'
After I fetch element and put it inside elem variable how do I put funcId as parameter to parent.ExecuteCommand()?
I think you want to set the function argument dynamically. Without using external libraries I would do as follows:
function runSubmit() {
var value = document.getElementById("text").value;
document.getElementById("run").addEventListener('click', function() {
func(value);
});
}
function func(value) {
console.log(value);
}
<input id="text" type="text">
<input type="submit" value="Setup Param" onclick="runSubmit()">
<input id="run" type="submit" value="Run with param">
How to use this: When you run the snippet, you will see a text input, a Setup Param button and a Run with param button. Insert something in the text input and click Setup Param. After, click on Run with param to see the effect
The input text contains the string that will be used as parameter for func(value). The update of #run button callback is triggered by the "Setup param", through the runSubmit() callback. This callback adds to the #run element a listener for the 'click' event, that runs a function with the parameter fixed when event occurs.
This is only a MCVE, you should adapt it to your case scenario.
Mh... Actually #jacob-goh gave you this exact solution in a comment while I wrote this...
you can use jquery to call you function from inside the function and pass your variable to that function.
function isMenuItemMasked(item)
{
var funcId = "75";
$(document).ready(function(){
$("#btnStrView").click(function(){
parent.ExecuteCommand(funcId);
});
});
}
function ExecuteCommand(your_var){
alert(your_var);
//your code
}

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

Jquery: How to call a function on click

I have a check box called, On click of that check box I am calling a function below.
$('#checkbox-id').on('click', function(){
alert("clicked");
}).each(function(){this.checked = ace.settings.is('main-container', 'fixed')})
Same method I want to call from different function. First I need to check weather checkbox is checked or not after that I need to call function once checkbox is check for this I am using this code.
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
$('#checkbox-id').click() // getting called but also unchecking checkbox it should not uncheck
}
});
This is working but it also unchecking checkbox which I don't want.
So How can I call that function without unchecking checkbox.
Here is JSFIDDLE to reproduce.
You can check If Check Box Is Checked Like :
$(document.body).on('change', '#chkID', function () {
if (this.checked) {
// CHECK BOX IS CHECKED
}
else {
// CHECK BOX IS NOT CHECKED
}
});
DEMO
Try declaring your function instead of using an anonymous function:
function handle_click() {
alert("clicked");
}
$('#checkbox-id').on('click', handle_click);
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked){
handle_click();
}
});
you can use this ,this will fire the alert once the checkbox become checked
$('#checkbox-id').on('click', function () {
if ($(this).prop("checked") == true) {
alert("clicked");
}
});
Try trigger() instead:
$('#checkbox-id').trigger('click');
Only workaround not proper solution
$(document).ready(function(){
if(document.getElementById('checkbox-id').checked) {
$('#checkbox-id').click() // getting called but also unchecking checkbox should not uncheck
$('#checkbox-id').prop('checked', true);
}
});

JS Check Form before submit

I have the following form:
<form onsubmit="return testform(tolowanswers,emptyAnswers);" class="edit_question" id="edit_question"
I check the Form before submit with the function testform, Is there a possibility to run a second function after testform()
thanks
One easy solution could to call the function like
return testform(tolowanswers,emptyAnswers) && secondmethod();
this will call the second function if testform returns true.
Another solution could to use another function like
onsubmit="return myfunction();"
then
function myfunction() {
if (testfunction()) {
secondfunction();
} else {
return false;
}
}
You just have to put those two functions inside the onsubmit event itself like below
"return (testform(tolowanswers,emptyAnswers) && secondFn())"
It will check if the first function is true and only if it returns true, then the secondFn will be executed.
Another way would be to invoke secondFn() inside testForm function after all validation.

Using click event while button is disabled

I need to check on clicks while the button is disabled is this possible? Or is there any other way to this?
HTML:
<form id="form">
<input type="submit" id="submit" value="Submit" />
</form>
JS:
$("#form").submit(function (e) {
e.preventDefault();
return false;
$("#submit").on("click", function () {
alert("Bla");
});
});
JS Fiddle: http://jsfiddle.net/hjYeR/1/
When you are using preventDefault(), there is no need to use return false.
However, any code after return statement in a function, won't execute.
Also there is no need to attach an event inside another event, write them separately:
$("#form").submit(function (e) {
e.preventDefault();
});
$("#submit").on("click", function () {
alert("Bla");
});
jsFiddle Demo
After you return false; the rest of your function will not run. You can bind your click event before returning false and it should work.
return statements are the end point in the function, the codes will not proceed ahead of that.
What you can do is simply remove the click event handler from within the submit handler itself.
$("#form").submit(function (e) {
return false; //e.preventDefault(); is not needed when used return false;
});
$("#submit").on("click", function () {
alert("Bla");
});

Categories