how to make a button a double check(cancel confirm) so no coincidence would happen

Question

I have a button that deletes the user info from my site I want to add something(like an alert) that says cancel...confirm so no coincidence would possibly happen(deleting an user by coincidence) pls help me thx

Answer 1

You could also add your own css generated pop-ups.

There's one thing special about these and that is these are customizable.As you create these pop up's on your own therfore you can add colors and shapes to it manually.

And chosing a color is helpful as you can influence the users deicision based on colors.

For example- If you chose a red color for your delete button the user will bw warned towards that button as some kind of potential threat/negative step/action.

popup = document.getElementById('popup'); // gets the popup element from the document
deleteBtn = document.getElementById('deleteBtn');
function confirmDelete() {
  //your code for deleting the user-details goes here
  hide();
  deleteBtn.style.display = 'Block';
  deleteBtn.innerHTML = 'Yor Details Have Been Successfully Deleted...';
  deleteBtn.onclick = '';
}

function show(){
  popup.style.display = 'Block';
  deleteBtn.style.display = 'None';
}

function hide(){
  popup.style.display = 'None';
  deleteBtn.style.display = 'Block';
}

#popup{
  display: None;
  margin: 15px;
  padding: 10px;
  border: 2px Solid Red;
  text-align: center;
}

#popupMessage{
  color: Red;
  font-family: monospace;
}

#deleteBtn{
  padding:5px;
  background-color: rgba(200,23,23,0.5);  //using shagdes of red also signals the user of a potentially negative step
  color: rgba(255,255,255,0.7);
}

#confirm{
  padding:5px;
  background-color: rgba(200,23,23,0.5);  //using shagdes of red also signals the user of a potentially negative step
  margin: 5px;
  padding: 5px;
}

#cancel{
  color: rgba(255,25,255,1);
  padding:5px;
  background-color: rgba(20,255,23,0.5);  //using shagdes of green might signal the user of a potentially positive step
  margin: 5px;
  padding: 5px;
}

<!--code for the pop up -->
<div id='popup'>
  <span id='popupMessage'>Are you sure you want to delete your details..?</span><br/>
  <button id='confirm' onclick='confirmDelete()'>Confirm</button>
  <button id='cancel' onclick='hide()'>Cancel</button>
</div>
<!---->

<!--code for the delete button-->
<button id='deleteBtn' onclick='show()'>Delete</button>
<!---->

Thanks as your question helped me learn newer concepts.

I had previously anwered this question which had enough information on what you asked and that answer was helpfully modified by the moderators,meanwhile i thought i should learn something about creating own pop up's so i came up with this new answer.Hope it helps...Happy coding..:)

Answer 2

You could simply use the confirm() method for throwing a pop up box and asking the user if they are sure to delete the information.

For example:

const confirmation = confirm('Are you sure to delete all the information..?') ; 
if (confirmation) {
  //code to delete the user information goes here
}

Answer 3

1. Using a button not in a form

document.getElementById("delete").addEventListener("click", function() {
  if (confirm("Are you sure?")) {
    console.log("Deleting");
    // code to delete
  }
  else {
    console.log("Cancelled");
  }
})

<button type="button" id="delete">Delete</button>

2. Using a submit button in a form

document.getElementById("form1").addEventListener("submit", function(e) {
  if (confirm("Are you sure?")) {
    console.log("Deleting");
    // form is submitting here
  }
  else {
    console.log("Cancelled");
    e.preventDefault(); // cancelling submission
  }
})

<form id="form1" action="delete">
<button>Delete</button>
</form>