(PHP) Javascript confirmation alert-CodePudding

can you help me with this? I want a confirmation alert before executing the delete query but i dont know how to pass variable from my js

function removeAppointment() {
  if(confirm("Are you sure you want to delete this appointment?")) {
    location.href="remove-appointment.php?" //passing the id but how?
  }
}

<!--I WANT TO HAVE A CONFIRMATION BEFORE DELETING THE ITEM-->
<a href="remove-appointment.php?remove='.$id.'"><button ><i ></i> Remove</button></a>

<!--BUT WITH SPECIFIC ID FROM MY TABLE-->
<a onclick="removeAppointment()"><button ><i ></i> Remove</button></a>

CodePudding user response：

Before answer: Your HTML is Error: The element button must not appear as a descendant of the a element. (Use validator to validate your HTML.)

You can use many ways to show confirm dialog before continue.
These two use event listener and onclick HTML attribute.

Use JavaScript event listener.

Your PHP, or HTML displaying page.

<a id="remove-link" href="remove-appointment.php?remove=<?=$id; ?>">Remove</a>
<button id="remove-button" type="button" data-link="remove-appointment.php?remove=<?=$id; ?>">Remove</button>

Your JS.

window.onload = () => {
    // for use with link
    let removeLink = document.getElementById('remove-link');
    removeLink.addEventListener('click', (e) => {
        if (confirm('Are you sure?')) {
            // confirmed.
            // let the link continue. do nothing here.
        } else {
            e.preventDefault();// stop link.
        }
    });

    // for use with button
    let removeBtn = document.getElementById('remove-button');
    removeBtn.addEventListener('click', (e) => {
        if (confirm('Are you sure?')) {
            // accepted.
            let linkTo = removeBtn.dataset.link;
            window.location.href = linkTo;
        } else {
            e.preventDefault();
        }
    });
}

Use `onclick` attribute.

This is almost the same with event listener.

<a id="remove-link" href="remove-appointment.php?remove=<?=$id; ?>" onclick="return askConfirmLink();">Remove</a>
<button id="remove-button" type="button" data-link="remove-appointment.php?remove=<?=$id; ?>" onclick="return askConfirmButton();">Remove</button>

function askConfirmLink() {
    if (confirm('Are you sure?')) {
        return true;
    }
    return false;
}


function askConfirmButton() {
    let removeBtn = document.getElementById('remove-button');
    if (confirm('Are you sure?')) {
        let linkTo = removeBtn.dataset.link;
        window.location.href = linkTo;
    }
    return false;
}

The difference on these 2 (a, button) is a you can let it continue the link but button you must use JS window.location.href to redirect the link.

See all 2 methods in action on jsfiddle.

Tips:

To make <a> link display like a button, you have to specify in CSS. You may know this but it is for everyone else.

a, 
button {
    appearance: none;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font-family: sans-serif;
    font-size: .85rem;
    padding: 3px;
    text-decoration: none;
}

<a href="#" onclick="return false;">This button is A</a>
<button type="button">This button is BUTTON</button>

CodePudding user response：

Why you need the removeAppointment.php file? i think the js function can handle that just to deleting a table record, and you can go to the same page as reload the page after deleting proccess at the js function.

Use JavaScript event listener.

Use onclick attribute.

Use `onclick` attribute.