Display Confirm Prompt When Checkbox is Checked But Not When Unchecked

I am creating a cookie whenever a checkbox is checked and I am using the following javascript function to prompt the user to confirm their selection when they check the checkbox before the cookie is created:

function set_check(me){
checkedMsg = confirm("Are you sure");
  if(me.checked && checkedMsg) {
    setCookie(me.value, me.checked, 1);
    console.log(me.value);
    console.log(me.checked);
    console.log(document.cookie);
} else if (! me.checked) {
    setCookie(me.value, me.checked, -1);
    console.log(me.value);
    console.log(me.checked);
    console.log(document.cookie);
}}  

<FORM NAME="featured">

Featured:
<input type="checkbox" name="feat" id="feat" onChange="set_check(this)">

</FORM>

I declared the confirm prompt as “checkedMsg” because I need to use the same prompt again to validate a separate script. But this script currently displays the confirm box when a user is unchecking the box as well as when they check the box and I need the confirm box to only appear when the box is being checked.

When I don’t declare the confirm prompt as “checkedMsg” and instead just use:
if(me.checked && confirm("Are you sure") {
then it will only show when the box is checked like I want, but then I cannot call this same confirm prompt in my other scripts.

So how can I use the confirm prompt in the IF statement and stop the confirm from carrying over to the ELSE statement? Any help is greatly appreciated!

What do you expect to happen with people who have confirm turned off in their browser now that it is obsolete?

What about the ones who click the turn off JavaScript checkbox that the confirm debugging dialog displays in some browsers?

What would you recommend rather than using a confirm prompt? I need some sort of message/prompt to alert the user what they are agreeing to do prior to the action being completed.
Thx

There are a number of build your own dialog scripts that have been written where you simply specify a few parameters to have a proper dialog box appear in the page that looks however you want it to look. One called sweetalert has been mentioned on the forum a few times.

1 Like

Yes, you might want to put a quick and dirty confirm in your dev code (IMHO console.log is a much better choice) but you definitely want to not have them on a live site.

As said modals are nice, AJAX feedback is good too, But always make sure the server-side code is there.

1 Like

I tried to use sweetalert but cannot get it to work correctly with all of the conditional statements and cookies/local sotrage for some reason. It looks like I am stuck using java…

Hey Felgall & Mittineague, it looks like I got sweetalert working in place of the standard confirm prompt but I am still running into the issue of the alert firing when the checkbox is unchecked as well as when it is checked.

Here is my code:

function set_check(me){  
swal({   title: "Are you sure?",   
  type: "warning",   
  showCancelButton: true,   
  confirmButtonColor: "#DD6B55",   
  confirmButtonText: "Yes!", 
  timer: 20000,  
  closeOnConfirm: true },
    function(isConfirm) { 
  if(me.checked && isConfirm) {
    setCookie(me.value, me.checked, 1);
    console.log(me.value);
    console.log(me.checked);
    console.log(document.cookie);
    window.location.reload();
} else if (me.checked && ! isConfirm) {
    window.location.reload();
} else if (! me.checked) {
    setCookie(me.value, me.checked, -1);
    console.log(me.value);
    console.log(me.checked);
    console.log(document.cookie);
    window.location.reload();
}});
}

And here is my checkbox:

<div id="bd-button">   
<form name="bdchkbox">
<label>  
  <input type="checkbox" hidden="hidden" name="bdchk" id="bdchk" onChange="set_check(this)"><span id="bdlbl">Featured</span> 
</label>
</form>
</div>

How can I make the sweetalert confirm box only fire when the checkbox is being checked but not fire when being unchecked? In other words, only fire when the IF statement is true but not when the ELSE IF statements are true.

Thanks.

needs to be changed to:

if (this.checked) set_check(this);
1 Like

Wow thank you SO much Felgall! I have been wracking my brain trying to figure this out but I was only focusing on the function itself, it never occurred to me to change the onChange call! I just needed to create a second function for when the box in unchecked and use the same code you provided and it works great :smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.