Javascript confirm & while looped echo

Question

I have a small problem, I made a delete button with a PHP while loop which looks like this:

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<a href="somewhere.php?id='.$id.'"><button onclick="delconfirm()">Delete</button></a>

}

this echo's a few delete buttons for some content. However I need user confirmation for deleting first, this is where onclick="delconfirm()" comes in.

my confirm looks like this:

function delconfirm()
{
    var r=confirm("Are you sure you want to delete this content?");

    if (r==true){

        // ...do nothing i guess? it needs to redirect using the PHP echo'd link...

    }
    else{

        window.location = "edit.php";

    }
}

However, whether you press cancel or ok, it'll delete it anyway. How can I fix this?

Answer 1

Change it to this:

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<a href="somewhere.php?id='.$id.'"><button onclick="return delconfirm();">Delete</button></a>

}

And then your function:

function delconfirm()
{
    return confirm("Are you sure you want to delete this content?");
}

EDIT : If you want a more unobtrusive solution:

while($something = mysql_fetch_array($sql_something)){

    $id = $something['id']
    echo '<input type="button" value="Delete" data-id="$id" />';

}

And then some javascript to bind the event:

function bindButtons() {
    var buttons = document.getElementsByTagName("input");
    for (var i = 0; i < buttons.length; i++) {
        if (buttons[i].type == "button") {
            buttons[i].onclick = function () {
                location.href='somewhere.php?id=' + this.getAttribute("data-id");
            }
        }
    }
}

and bind it to the window.onload , as per Ian suggestion:

window.onload = bindButtons;

Note : If you were using jQuery this solution would be easier and more elegant.

Working jsFiddle

Answer 2

If the user presses cancel then you need to stop the event from doing what it would normally do. Try this, for example:

function delconfirm(e) {
    e = e || window.event;

    if (!confirm("Are you sure you want to delete this content?")) {
        e.preventDefault();

        // This will prevent the event from bubbling up to the <a>.
        e.stopPropagation();

        return false; // For the ancient/crappy browsers still out there.
    }

    return true;
}

Answer 3

You need to stop/delete the current click event. After your code is executed the event sinks to the anchor and triggers a click. With MooTools just add 'new Event().stop();'. I think jQuery has also something like this.

EDIT: Hanlet Escaño is right. You can return true (the browser will redirect to the URL in the href, or false to let the browser do nothing)

Answer 4

In order to prevent to the HTML link to work, you have to return false in your js function or event.preventDefault() where event is an argument which is passed to the click event function

I did thin when putting a click event on the a element and not on an element inside the a tag. But it might work.