How can I implement a confirmation dialog for critical action?

Question

Im not proficient in JS myself very much, so it would probably take me a few hours to figure this out myself, so I figured I'd ask you guys.

I have Delete/Ban links on my site, that are used by admins to moderate the users and what they post. Since these links have such drastic consequences on the site's content I would want to have some sort of confirmation that would popup when one of the links is clicked.

It should have some extra text explaining what's about to happen, and OK/Cancel buttons.

So I have a link, for example like this:

<a href="ban.php?id=123" class="confirm_ban">Ban John</a>
<a href="delete.php?id=123" class="confirm_delete">Delete Post</a>

When this link is clicked, the code needs to be triggered. If OK is pressed, it goes to ban.php?id=123, if Cancel is pressed, it doesn't go anywhere.

A simple JS dialog box, will do. Or if you have a link for a fancy jquery powered box, you can point me towards that also.

Thanks!

Answer 1

Looking for this?

//Cleaner explanation
$("document").ready(function(){
    $(".dangerousLink").each(function(){
        var confirmUrl = $(this).attr('href');
        $(this).attr('href', 'javascript:;');
        $(this).click(function(){
            if(confirm("This is dangerous... are you sure?")) {
                window.location = confirmUrl;
            }
        });
    });
});

//Now just append a class dangerousLink to all links that you want confirmation
<a href="dangerousStuff.php?x=10" class="dangerousLink">Blow up</a>

If you are looking for a fancy dialog, you'll find something interesting here.

Answer 2

Easiest way to achieve this is to use the confirm() function:

var confirmed = confirm('Do you really want to do this?');
if(confirmed) {
    //Do dangerous action
}

It basically displays a box with the text you provide and ok and cancel buttons.

With a link you can do something like this:

<a href="someurl" onclick="return confirm('Are you sure?');">

It's not best possible practices to put the action in the onclick like that, but it works and is simple to understand even if you're not a pro javascripter

Answer 3

I think you're looking for something like "confirm delete".

The Confirm function takes as an input a string parameter. It displays a dialog box whose message is that parameter, with OK and Cancel buttons.

If the user clicks OK, the confirm function returns True; if the user clicks Cancel False is returned.

Here's an example of using it:

function fConfirmDelete()
{
    if(confirm("Delete Field?"))
    {
     document.forms[0].lblFieldSelect.value="DELETE";
     document.forms[0].submit();
    }
    else
    {
     document.forms[0].lblFieldSelect.value="";
    }
    return;
}

Answer 4

Here's a decent jQuery dialog plugin. Of course, you will need jQuery too.

http://nadiana.com/jquery-confirm-plugin

Answer 5

var confirm = confirm('Blabla');

if(confirm)
{
 // do
}

Answer 6

This is plain JS:

    <a href="delete.do" 
      onClick="return confirm('Delete. Are you sure?');">Delete</a>