CODEWITHSUNDEEP
javascripthtml
julianc
julianc

Reputation: 37

showing Confirm message when unchecking a checkbox in javascript

I want a message that reads "are you sure?" to display when the user tries to uncheck a checkbox. If they choose something like "yes", then uncheck it. If they choose "no", then leave as is. I'm fairly new to JavaScript and my attempt at this has prompted me with the error "JavaScript runtime error: Unable to get property 'checked' of undefined or null reference". Here is my Checkbox code:

<div id="ChkBox">
    <input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure('ChkBox')" value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive =="True" ? "checked=\"checked\"" : "") /> Is Active
</div>
<script>
    Areyousure();
</script>

and here is the function: 

function Areyousure(id) {
    if (document.getElementById(id).checked == true) {
        return false;
    } else {
        var box = confirm("Are you sure you want to Uncheck this?");
        if (box == true)
            return true;
        else
            document.getElementById(id).checked = true;
    }
}

What can i do to fix this? Thanks in Advance!

Upvotes: 0

Views: 1556

Answers (3)

Naman Sharma
Naman Sharma

Reputation: 179

Since you are finding the element by id (which is not defined), so javascript will not be able to find the html element.

Instead you can edit your input tag to something like this;

<input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure()" value="@Model.Pharmacy.IsActive" @(Model.Pharmacy.IsActive =="True" ? "checked=\"checked\"" : "") />

And then instead of getting the element by Id, you can get it by name using:

document.getElementByName("chkIsActive");

You also need to change the function as no parameter will be passed to the function now. Cheers :)

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76577

You could consider passing in the element itself to avoid any issues with targeting it based on its id attribute using :

onchange='Areyousure(this);'

And then adjust your function accordingly to handle determine if the checked attribute should persist through the change or not :

function Areyousure(element) {
    // If it is checked now, let it be
    if (element.checked) {
        return false;
    // Otherwise prompt the user
    } else {
        // Prompt the user to make sure
        if (confirm("Are you sure you want to Uncheck this?")){
            // The user confirmed it, so uncheck it
            return true;
        }else{
            // Otherwise, keep it checked
            element.checked = true;
        } 
    }
}

Example

enter image description here

<div id="ChkBox">
  <input style="margin: 5px; " type="checkbox" name="chkIsActive" onchange="Areyousure(this)" value="example" checked />Is Active
</div>
<script>
  function Areyousure(element) {
    // If it is checked now, let it be
    if (element.checked) {
        return false;
    // Otherwise prompt the user
    } else {
        // Prompt the user to make sure
        if (confirm("Are you sure you want to Uncheck this?")){
            // The user confirmed it, so uncheck it
            return true;
        }else{
            // Otherwise, keep it checked
            element.checked = true;
        } 
    }
}
</script>

Upvotes: 2

Brian Mains
Brian Mains

Reputation: 50728

Your method expects an ID but none is passed in:

Add to your input:

<input id="chkIsActive"

And change the script to call method to:

<script>
    Areyousure("chkIsActive");
</script>

Upvotes: 0

Related Questions