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?

Cecillececily

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

});

Blackford

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..:) – Afterburning

if you open in new tab or middle mouse click on the link,you will pass the confirmation ,using <button> instead of <a> will prevent from accidentally open link,without confirmation – Inquisitorial

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.

Prodrome

This one worked for me. If I went with the accepted solution $(this).attr('href') returned undefined – Lunch

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

Leannleanna

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

Philae

Answer 5

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

Cognac

Answer 6

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.

Reyesreykjavik

Answer 7

you could do

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

          //no ajax call
     }

    }    

Empress

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;

}

Departmentalize

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

Seguidilla

Answer 10

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

Euchologion