36

I have a link in my HTML:

<a href="/DoSomethingDangerous">do something dangerous</a>

Visiting the DoSomethingDangerous link causes a not easily reversable action to occur.

So after the link is clicked on I would like a dialog box (eg "Are you sure?" "OK" "Cancel") to be displayed and if the user clicks Cancel the link is not visited and the browser remains at the same page.

What is the cleanest technique using either Javascript or jQuery to implement this?

11mb
  • 1,339
  • 2
  • 16
  • 33
Andrew Tomazos
  • 66,139
  • 40
  • 186
  • 319
  • 5
    Is it safe to assume that everyone using this has javascript enabled? Any user with it disabled would be able to visit the "dangerous" page with no warnings – Manatherin Sep 21 '12 at 13:16
  • 3
    You should be doing dangerous things via post requests only. No amount of JavaScript will prevent somebody from accidentally visiting this link if they have JavaScript disabled, and it will have no impact on a search engine spidering your site. – user229044 Sep 21 '12 at 13:23
  • You might want to rearrange things..just *visiting* a link should not cause irreversible actions. If that page does potentially bad stuff, it should maybe have a confirmation there with a form that posts back to itself to do the real action. If you want to have a dialog that runs on the page to confirm, you could have it generate that form and submit it (or submit via ajax), and non-JS users would still see the static form dialog. – cHao Sep 21 '12 at 13:23
  • The page requires login so can't be spidered, the action is also reversible, so as long as 90%+ of people get the confirmation dialog I'm happy. – Andrew Tomazos Sep 21 '12 at 13:32
  • possible duplicate of [Javascript confirmation dialog on href-link?](http://stackoverflow.com/questions/10462839/javascript-confirmation-dialog-on-href-link) – greut May 27 '14 at 09:01

5 Answers5

86
<a class="confirm" href="/DoSomethingDangerous">do something dangerous</a>

JQuery:

$(function() {
    $('.confirm').click(function(e) {
        e.preventDefault();
        if (window.confirm("Are you sure?")) {
            location.href = this.href;
        }
    });
});

or even simpler:

$(function() {
    $('.confirm').click(function() {
        return window.confirm("Are you sure?");
    });
});

The native confirm box can't be styled. If you want style, then you could use jQuery.UI.dialog

Bigbob556677
  • 1,805
  • 1
  • 13
  • 38
xdazz
  • 158,678
  • 38
  • 247
  • 274
39

If we know that the DOM function window.confirm() returns boolean true on "yes" and false on "no", our link could be simplified a little bit:

<a href="/DoSomething" onclick="return confirm('Are you sure?');">Link</a>
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
CoR
  • 3,826
  • 5
  • 35
  • 42
  • Syntax error: Unexpected ) - You have one bracket to many at the end there, should be: `return confirm('Are you sure?');` – Chud37 Mar 06 '15 at 10:10
22

I think the simplest solution will be

<a href="/DoSomethingDangerous" onclick="if (!confirm('Are you sure?')) return false;">Link test</a>

vadim
  • 1,698
  • 1
  • 10
  • 19
16
$('a').click(function(e)
{
    if(confirm("Are you sure?"))
    {
        alert('navigate!');
    }
    else
    {
        e.preventDefault();
    }
});

Demo: http://jsfiddle.net/PDj9H/

webdeveloper
  • 17,174
  • 3
  • 48
  • 47
2

I suggest that you use jQuery UI modal-confirmation dialog - http://jqueryui.com/demos/dialog/#modal-confirmation.

Dan Barzilay
  • 4,974
  • 5
  • 27
  • 39