Javascript confirm dialog

Question

I want to add a confirm dialog to a delete button to ask the user whether it is ok or not deleting the selected item.

If not, nothing should happend, else a url should be executed.

I know how to realize this via some Javascript code but I am looking for a solution that has less code. I mean e.g. :

<a href="mysite.de/xy/delete" onClick="...">Delete</a>

Is it possible to put the whole functionality in the onClick element without having some extra Javascript in the header?

Answer 1

You can return the confirm() (which returns true/false), like this:

<a href="mysite.de/xy/delete" onClick="return confirm('You sure??');">Delete</a>

You can test it here

Answer 2

Better (though far from ideal!): turn it around. Don't let the link do anything, unless you got JavaScript:

<a href="#" 
  onclick="if confirm('Sure?') { window.location='http://mysite.de/xy/delete';}">
    Click to delete
</a>

This at least prevents the link to work without JavaScript. This also reduces the risk of the link accidentally being crawled by Google, or even by some local plugin. (Image if you had a plugin that would try to load/show as thumbnail) the target page on hover of a link!)

Still, this solution is not ideal. You will actually browse to the url, and the url might show up in the history because of that. You could actually delete Bob, create a new Bob, and then delete that one by accident by just clicking 'back' in the browser!

A better option would be to use JavaScript or a form to post the desired action. You can make a request to the server with the POST method, or arguably better, the DELETE method. That should also prevent the urls from being indexed.