javascript confirm dialog not working properly

Question

i've been trying to get a confirm box to work, i am using php and jquery to make a confirm box appear when clicking on a delete link, actual code :

$(document).ready(function(){
    if (jQuery("a.delete-link").length > 0) {
        $("a.delete-link").bind("click", function(){
            return confirm("Sunteti sigur ca doriti sa stergeti?");
        });
    }
});

and the link is called :

<a href="javascript:void(0);" class="formSubmit delete-link" id="sterge">sterge</a>

the link is used to submit a form when clicked, the code for that is :

$(document).ready(function(){
    if ($(".formSubmit").length > 0) {
        if ($(".formSubmit").parents("form").find("input:submit").length == 0) {
            $(".formSubmit").parents("form").append('<div style="width:1px;height:1px;overflow:hidden;"><input style="width:0;height:0;overflow:hidden;" type="submit" /></div>');
        }
        $(".formSubmit").click(function(){
            $(this).parents("form").trigger("submit");
            return false;
        });
    }
});

i do get the confirm dialog, but any option i chose, the form submits and the delete action is called.. any idea what i'm doing wrong ?

Answer 1

Can you use this:

<a href="#" onclick"return javascript:void(0);" ... />

Answer 2

You have two click events bound to the anchor tag. The first event shows the confirm and the second submits the form.

Trigger the form submission only if the user confirmed:

$(document).ready(function(){
    if ($(".formSubmit").length > 0) {
        if ($(".formSubmit").parents("form").find("input:submit").length == 0) {
            $(".formSubmit").parents("form").append('<div style="width:1px;height:1px;overflow:hidden;"><input style="width:0;height:0;overflow:hidden;" type="submit" /></div>');
        }
        $(".formSubmit").click(function(){
            if ($(this).hasClass('delete-link') && confirm("Sunteti sigur ca doriti sa stergeti?"))
            {
                $(this).parents("form").trigger("submit");
            }
            return false;
        });
    }
});

Answer 3

Bind the confirmation to the onSubmit of the form. You'll save a lot of hassle that way and you will get a confirmation no matter how the form was submited.

$( document ).ready ( function () {
    $( 'selector for your form' ).submit ( function () {
        return confirm ( 'Are you sure ...?' );
    } );
} );