onclick="confirm()" cancel button not working

Question

I have grid , in that gird , for particular record I'm keeping active/inactive status. this is the view of that status

when I click active button Its showing this alert message.

but when I click cancel button I cant stop the action which is going to be active status.

this is the html code snippet for this active/inactive buttons

   @if (item.Status == true)
                       {
                           <button class="btn btn-xs active btn-primary" data-HEI_ID = "@item.HEI_ID" data-status = "true"  onclick="confirm_active()">Active</button>                       
                            <button class="btn btn-xs inactiveColor btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "false"  onclick="confirm_inactive()">Inactive</button>

                       }

                       else
                       {
                           <button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true"  onclick="confirm_active()">Active</button>                       
                           <button class="btn btn-xs inactiveColor btn-primary active" data-HEI_ID = "@item.HEI_ID" data-status = "false"  onclick="confirm_inactive()">Inactive</button>

                           }

this is script part for the alert message

<script type="text/javascript">
function confirm_active() {
    var retVal = confirm("Are you sure you want to change the status to Active?");
    if (retVal == true) {
        // do stuff
        return true;
    } else {
        return false;
    }
}

function confirm_inactive() {
    var retVal = confirm("Are you sure you want to change the status to Inactive?");
    if (retVal == true) {
       // do stuff
        return true;
    } else {
        return false;
    }
}

How can I make workable cancel button

Answer 1

You missed the return statement in the onclick handler. As a additional note its good practice to end the function call with semi-colon

Change

 onclick="confirm_active()"

To

 onclick="return confirm_active();"

Same applies to confirm_inactive() as well.

Answer 2

If you use onclick function that return any value you must write return before function here is example

   @if (item.Status == true)
                       {
                           <button class="btn btn-xs active btn-primary" data-HEI_ID = "@item.HEI_ID" data-status = "true"  onclick="return confirm_active()">Active</button>                       
                            <button class="btn btn-xs inactiveColor btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "false"  onclick="return confirm_inactive()">Inactive</button>

                       }

                       else
                       {
                           <button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true"  onclick="return confirm_active()">Active</button>                       
                           <button class="btn btn-xs inactiveColor btn-primary active" data-HEI_ID = "@item.HEI_ID" data-status = "false"  onclick="return confirm_inactive()">Inactive</button>

                           }

Also you can write direct confirm in your html

                           <button class="btn btn-xs btn-default" data-HEI_ID = "@item.HEI_ID" data-status = "true"  onclick='confirm("Are you sure you want to change the status to Inactive?")'>Active</button>                       

Answer 3

You need to return value to the element who is creating this event. You are calling a function on click of that element, how element would know the return value of that function. so instead of confirm_inactive() you need to use return confirm_inactive() in on click.

Using confirm_inactive() is just like

function onClick(){
   confirm_inactive()
}

where return confirm_inactive() is like

function onClick(){
   return confirm_inactive()
}

in first case even confirm_inactive() returns something, you will get undefined when you call onClick(). But in second case, when you call onClick(), it calls confirm_inactive() and returns its result.

This example is just to understand, the problem.

Answer 4

<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Language" charset="UTF-8">
    <script type="text/javascript" src="jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <style>

    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>University ID</th>
                <th>University Name</th>
                <th>Established Year</th>
                <th>Type</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>000001</td>
                <td>Kelum U</td>
                <td>1976</td>
                <td class="privacy">Private</td>
                <td class="status">
                    <button class='btn btn-xs btn-default confirm_active' data-HEI_ID = '@item.HEI_ID' data-status = 'true'>Active</button><button class='btn btn-xs btn-danger active confirm_inactive' data-HEI_ID = '@item.HEI_ID' data-status = 'false'>Inactive</button>
                </td>
            </tr>
            <tr>
                <td>000002</td>
                <td>Wiling M</td>
                <td>1977</td>
                <td class="privacy">Public</td>
                <td class="status">
                    <button class='btn btn-xs btn-default confirm_active' data-HEI_ID = '@item.HEI_ID' data-status = 'true'>Active</button><button class='btn btn-xs btn-danger active confirm_inactive' data-HEI_ID = '@item.HEI_ID' data-status = 'false'>Inactive</button>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        $(".status .confirm_active").on('click', function(){
            var retVal = confirm("Are you sure you want to change the status to Active?");
            if(retVal == true){
                $(this).removeClass('btn-default').addClass('btn-primary active');
                $(this).closest('.status').find('.confirm_inactive')
                .removeClass('btn-danger active').addClass('btn-default');
                $(this).closest('tr').find('.privacy').html('Private');
            }
        });

        $(".status .confirm_inactive").on('click', function(){
            var retVal = confirm("Are you sure you want to change the status to Inactive?");
            if(retVal == true){
                $(this).removeClass('btn-default').addClass('btn-danger active');
                $(this).closest('.status').find('.confirm_active')
                .removeClass('btn-primary active').addClass('btn-default');
                $(this).closest('tr').find('.privacy').html('Public');
            }
        });
    </script>
</body>
</html>