Apologies if this is overly basic, but I couldn't find much info with my searches.

I have a simple link: <a href="delete">delete</a>.

Clicking the link deletes an item from my database.

How do I make the link show a popup (JavaScript alert box?) with a message:

Are you sure? [Yes] [No]

I'd like to use jQuery instead of inline JavaScript, if possible.

Apologies if this is overly basic, but I couldn't find much info with my searches.

I have a simple link: <a href="delete">delete</a>.

Clicking the link deletes an item from my database.

How do I make the link show a popup (JavaScript alert box?) with a message:

Are you sure? [Yes] [No]

I'd like to use jQuery instead of inline JavaScript, if possible.

• javascript
• jquery

• Note that you should have these kinds of actions tied to anchors but to forms, lest you find your database wiped next time your page gets crawled (which would bypass any js confirmations anyway). – CurtainDog Commented Feb 17, 2010 at 0:08

3 Answers 3

Start by giving your element an id.

 <a href="delete" id="delbtn">delete</a>

Then:

<script>
      $(document).ready(function(){

                $('#delbtn').click(function(){

                         return confirm("Are You sure");

                 });
      });
</script>

give id/class to your anchor:

<a href="delete" class="btn_del">Delete</a>

then on document load assign an event to clicking the link.

$(function(){  
    //on document ready
    $('.btn_del').click(function(e){
        return confirm('Are you sure?')
    })
})

Use jQuery UI's modal dialogs they're infinitely better than alert.

$("a#delete").click(function() {
    $("#dialog").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Really delete?': function() {
                $(this).dialog('close');
                                          delete();
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});