Deleting after confirmation in php

Question

I have a contact form. Now when I need to delete a record, I need a confirmation box to ask for user's confirmation. I've achieved this, so far so good. But the record gets deleted for both OK and Cancel buttons.

My code is as follows:

<td><a href="edit.php?id=<?php $_SESSION["name"] = ""; $_REQUEST["id"]=$row["first_name"]; echo $row["first_name"]; $_SESSION["name"]=$row["first_name"]; ?>">Edit</a> / <a href="delete.php?id=<?php echo $row["first_name"]; ?>" onclick="check()"> Delete </a></td>

<script>
    function check(){
        if(confirm("Are you sure you want to delete?")){
            window.location.href = "delete.php?id=<?php echo $row["first_name"]; ?>";
            return true;
        }
        else{
            header("Location: http://localhost/test/display.php?show_details=Show+Details");
            return false;
        }
    }
</script> 

What could I do to delete the records only after clicking OK button in the confirmation box and return to display.php(same page) on clicking Cancel?

It should navigate to delete.php only on clicking OK and stay in display.php on clicking Cancel.

I'm new to PHP.. Help please...

Answer 1

An HTML anchor has a default action for clicks on it: open a link. Now if you add another click handler in JavaScript, you will have to prevent the default action for that element and thus prevent the link from being opened.

To prevent the default event action from within an inline event handler (one that is setup using the attribute onclick in contrast to use addEventListener() in JS) you must return false in that event handler.

See also: How to prevent default event handling in an onclick method?

The following two snippets fix that issue and are also re-using the href-attribute, so it must not be hardcoded in JS again.

variant 1:

<p>
    <a href="edit.php?id=123">Edit</a>
    /
    <a href="delete.php?id=123" onclick="return check(this)">Delete</a>
</p>

<script>
    function check(anchor) {
        /* Only open the delete-link, if the confirm returns TRUE */
        if (confirm('Are you sure you want to delete?')) {
            window.location.href = anchor.href;
        }

        /* Return FALSE to prevent the default link action */
        return false;
    }
</script>

variant 2:

<p>
    <a href="edit.php?id=123">Edit</a>
    /
    <!-- Return FALSE to prevent the default link action -->
    <a href="delete.php?id=123" onclick="check(this); return false;">Delete</a>
</p>

<script>
    function check(anchor) {
        /* Only open the delete-link, if the confirm returns TRUE */
        if (confirm('Are you sure you want to delete?')) {
            window.location.href = anchor.href;
        }
    }
</script>

variant 3A:

Not returning false, but using event.preventDefault(). (Inspired by the comment of @ths)

<p>
    <a href="edit.php?id=123">Edit</a>
    /
    <a href="delete.php?id=123" onclick="check(event, this)">Delete</a>
</p>

<script>
    function check(event, anchor) {
        /* Prevent the default link action */
        event.preventDefault();

        /* Only open the delete-link, if the confirm returns TRUE */
        if (confirm('Are you sure you want to delete?')) {
            window.location.href = anchor.href;
        }
    }
</script>

variant 3B:

Not returning false, but using event.preventDefault(). (Inspired by the comment of @ths)

<p>
    <a href="edit.php?id=123">Edit</a>
    /
    <a href="delete.php?id=123" onclick="event.preventDefault(); check(this);">Delete</a>
</p>

<script>
    function check(anchor) {
        /* Only open the delete-link, if the confirm returns TRUE */
        if (confirm('Are you sure you want to delete?')) {
            window.location.href = anchor.href;
        }
    }
</script>