How to show a confirm message before delete?

How to show a confirm message before delete?

I want to get a confirm message on clicking delete (this maybe a button or an image). If the user selects ‘Ok’ then delete is done, else if ‘Cancel’ is clicked nothing happens.
I tried echoing this when the button was clicked, but echoing stuff makes my input boxes and text boxes lose their styles and design.

Solutions/Answers:

Solution 1:

Write this in onclick event of the button:

var result = confirm("Want to delete?");
if (result) {
    //Logic to delete the item
}

Solution 2:

You can better use as follows

 <a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

Solution 3:

This is how you would do it with unobtrusive JavaScript and the confirm message being hold in the HTML.

<a href="/delete" class="delete" data-confirm="Are you sure to delete this item?">Delete</a>

This is pure vanilla JS, compatible with IE 9+:

var deleteLinks = document.querySelectorAll('.delete');

for (var i = 0; i < deleteLinks.length; i++) {
  deleteLinks[i].addEventListener('click', function(event) {
      event.preventDefault();

      var choice = confirm(this.getAttribute('data-confirm'));

      if (choice) {
        window.location.href = this.getAttribute('href');
      }
  });
}

See it in action: http://codepen.io/anon/pen/NqdKZq

Related:  Disable the Ctrl + Scroll to Zoom google maps

Solution 4:

function ConfirmDelete()
{
  var x = confirm("Are you sure you want to delete?");
  if (x)
      return true;
  else
    return false;
}


<input type="button" onclick="ConfirmDelete()">

Solution 5:

Try this. It works for me

 <a href="delete_methode_link" onclick="return confirm('Are you sure you want to Remove?');">Remove</a>

Solution 6:

improving on user1697128 (because I cant yet comment on it)

<script>
    function ConfirmDelete()
    {
      var x = confirm("Are you sure you want to delete?");
      if (x)
          return true;
      else
        return false;
    }
</script>    

<button Onclick="return ConfirmDelete();" type="submit" name="actiondelete" value="1"><img src="images/action_delete.png" alt="Delete"></button>

will cancel form submission if cancel is pressed