I have a small html form with three checkboxes, one in each row. I want to have a javascript confirm box show when the user unchecks the box, and then if the user selects cancel, the checkbox remains checked. I've searched this site and a few others but almost everything was to do with the checkbox being checked, like if they had to agree to some terms or something. I am very new to Javascript however I tried to make a function based on what I though it should look like, but it doesn't work.
Here is my form:
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
And here is the function I tried, but doesn't work:
function cTrig(name) {
if (name.checked == true) {
confirm("Are you sure you want to do this?");
return true;
} else {
return false;
}
}
Here is a jsfiddle
I would prefer something in Javascript as I want to become more familiar with that language before getting into jquery, but if it has to be done in jquery, then that is fine. Cheers.
I have a small html form with three checkboxes, one in each row. I want to have a javascript confirm box show when the user unchecks the box, and then if the user selects cancel, the checkbox remains checked. I've searched this site and a few others but almost everything was to do with the checkbox being checked, like if they had to agree to some terms or something. I am very new to Javascript however I tried to make a function based on what I though it should look like, but it doesn't work.
Here is my form:
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this.name)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
And here is the function I tried, but doesn't work:
function cTrig(name) {
if (name.checked == true) {
confirm("Are you sure you want to do this?");
return true;
} else {
return false;
}
}
Here is a jsfiddle
I would prefer something in Javascript as I want to become more familiar with that language before getting into jquery, but if it has to be done in jquery, then that is fine. Cheers.
3 Answers
Reset to default 6Try This Way
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name ="check1" id="check1" checked='checked' onchange="cTrig('check1')"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" id="check2" checked='checked' onchange="cTrig('check2')"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" id="check3" name="check3" checked='checked' onchange="cTrig('check3')"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
By Using Element Id
function cTrig(clickedid) {
if (document.getElementById(clickedid).checked == true) {
return false;
} else {
var box= confirm("Are you sure you want to do this?");
if (box==true)
return true;
else
document.getElementById(clickedid).checked = true;
}
}
Working Demo
By Using Name
function cTrig(clickedid) {
if (document.getElementsByName(clickedid)[0].checked == true) {
return false;
} else {
var box= confirm("Are you sure you want to do this?");
if (box==true)
return true;
else
document.getElementsByName(clickedid)[0].checked = true;
}
}
Demo Using element name
I would do it this way:
Your form:
<form action="" method="post">
<table id="table">
<tr>
<td>Checkbox One</td>
<td align="center">
<input type="checkbox" name="check1" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr>
<td>Checkbox Two</td>
<td align="center">
<input type="checkbox" name="check2" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr>
<td>Checkbox Three</td>
<td align="center">
<input type="checkbox" name="check3" checked="checked" onchange="cTrig(this)"></input>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="submit"></input>
</td>
</tr>
</table>
</form>
The javascript:
function cTrig(box) {
if (!box.checked) {
if (!confirm("Are you sure you want to do this?")) {
box.checked = true;
}
}
}
Uses jQuery (because it's just better) but I could whip it up without if needed:
$('#check1').change(function(){
if($("#check1").prop('checked') == false)
{
var i = window.confirm("Sure?");
if(i == true)
{
$("#check1").prop('checked', false);
}
else
{
$("#check1").prop('checked', true);
}
}
});
This additionally assumes you're assigning each checkbox an id, which you will need to. Name doesn't cut it in this case.
<input type="checkbox" id="check1" name="check1" checked="checked"></input>
etc...
http://jsfiddle.net/RbENV/10/
Note that I went the native way for the confirm dialogue, but using jQuery UI you can control the box alot more.
EDIT: Added a check to make sure it only happens when you're unchecking it. Missed that part. (Note you check for false because when the change event fires the change has already happened)