Prevent a link, confirm and then goto location jquery

Question

I have links like this.

<a href="delete.php?id=1" class="delete">Delete</a>

If a user click on it. A confirmation should popup and then only if user click yes, it should goto the actual url.

I know that this can prevent the default behavior

    function show_confirm()
    {
    var r=confirm("Are you sure you want to delete?");
    if (r==true)   {  **//what to do here?!!** }

    }    


    $('.delete').click(function(event) {
    event.preventDefault();
    show_confirm()
    });

But how do i continue to that link or send an ajax post to that link after confirming?

score 47 · Accepted Answer · answered Jul 25 '11 at 20:33

47

you could do it all within the click:

$('.delete').click(function(event) {
    event.preventDefault();
    var r=confirm("Are you sure you want to delete?");
    if (r==true)   {  
       window.location = $(this).attr('href');
    }

});

Or you could do it by passing the clicked element to the function:

function show_confirm(obj){
    var r=confirm("Are you sure you want to delete?");
    if (r==true)  
       window.location = obj.attr('href');
}    
$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm($(this));

});

answered Jul 25 '11 at 20:33

locrizak

12,192
12
60
80

4

Okay, so .. there's one pitfall to this approach, and that would be that this doesn't look at if the user intended to open the link in a new tab, there might even be a target="_somespecificwindow" or target="_blank" on there..:) – Michiel Cornille Sep 09 '13 at 12:15
if you _open in new tab_ or middle mouse click on the link,you will pass the confirmation ,using ` – Arash Jul 08 '17 at 16:41

score 4 · Answer 2 · answered Dec 11 '14 at 14:06

It took me a while to figure this out, so I figured I'd post my solution.

$('.delete').click(function(e){
    if(confirm('Are you sure?')){
        // The user pressed OK
        // Do nothing, the link will continue to be opened normally
    } else {
        // The user pressed Cancel, so prevent the link from opening
        e.preventDefault();
    }
}

I was thinking about confirm the wrong way. Confirm will prevent the site from opening automatically, and wait for the user's input. So basically, you need to move your preventDefault to the else.

So you only prevent the link from opening if they click Cancel. This also allows for the link to function as it normally would, for instance if it has a target="_blank" instruction.

This one worked for me. If I went with the accepted solution `$(this).attr('href')` returned `undefined` — dbr, Sep 17 '16 at 23:50

score 2 · Answer 3 · answered Nov 07 '12 at 10:15

2

To optimize code in function show_confirm, try to use below :

function show_confirm(obj){
   if(confirm("Are you sure you want to delete?")) window.location = obj.attr('href');
}

answered Nov 07 '12 at 10:15

Chanraksmey

126
1
6

score 2 · Answer 4 · answered Jul 25 '11 at 20:34

function show_confirm(url){
    var r=confirm("Are you sure you want to delete?");
    if (r==true){
        location.top.href = url;
    }
}    


$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm($(this).attr('href'));
});

If you want to use ajax you can replace location.top.href = url; with $.get(url);

score 2 · Answer 5 · answered Jul 25 '11 at 20:35

2

function show_confirm(elem)
{
    var r=confirm("Are you sure you want to delete?");
    if (r==true) { 
        window.location.href = elem.href;
    }
}    

$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm(this)
});

answered Jul 25 '11 at 20:35

ChristopheCVB

7,269
1
29
54

score 1 · Answer 6 · answered Apr 03 '12 at 09:34

1

This is a short form:

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

I use it on web sites for download/link confirmation.

answered Apr 03 '12 at 09:34

Matteo Conta

1,423
13
17

Roy Shoa · Answer 7 · 2016-09-20T07:59:07.550

0

If you like to use alert/confirm, this is the best way (I prefer to use Bootstrap Confirmation or bootbox):

$('.confirm-delete').click( function( event ) {
    if ( !confirm('Are you sure?') ) event.preventDefault();
});

edited Sep 20 '16 at 07:59

answered Sep 20 '16 at 07:24

Roy Shoa

3,117
1
37
41

score 0 · Answer 8 · answered Jul 25 '11 at 20:34

0

you could do

function show_confirm()
    {
    if(confirm("Are you sure you want to delete?")){
        //make ajax call
     }else{

          //no ajax call
     }

    }

answered Jul 25 '11 at 20:34

Nicola Peluchetti

76,206
31
145
192

score 0 · Answer 9 · answered Jul 25 '11 at 20:41

 $('.delete').click(function() {

   if (confirm('Are you sure?')) {
     $.post($(this).attr('href'), function() {
       // Delete is OK, update the table or whatever has to be done after a succesfull delete
      ....
     }
   }

   return false;

}

score 0 · Answer 10 · answered Mar 18 '22 at 12:41

In my case, jQuery wont run, so I take this solution for me:

<button onclick="show_confirm('delete?id=1')">&times;</button>

And

function show_confirm(obj) {
  var r = confirm("Are you sure you want to delete?");
  if (r === true)
    window.location.replace(obj);
}

Prevent a link, confirm and then goto location jquery

10 Answers10