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?

Answer 1

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));

});

Answer 2

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.

Answer 3

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);

Answer 4

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)
});

Answer 5

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.

Answer 6

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');
}

Answer 7

you could do

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

          //no ajax call
     }

    }    

Answer 8

 $('.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;

}

Answer 9

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();
});