How to confirm navigation for a link in a href tag?

Question

I'm using simple links for an admin panel but in case of user accidently clicks on link for user deletion, there should be a confirmation pop-up for avoding this.

Probably as you know a href tag's are not fully compatible with javascript. So, i have used span tag for "onclick" but that didn't went so well:

<script type="text/javascript">
function confirm_click()
{
return confirm("Are you sure ?");
}

</script>

Here is the html code for link:

   <span onclick="confirm_click();">    <a title="Delete User" href="http://www.google.com"><i class="icon-remove-sign">DELETE</i></a></span>

What factor is preventing you from using an anchor on its own? — Alex K., Nov 27 '12 at 11:41
You also don't need to test a bool against `true`, you can simply have `function confirm_click(){return confirm("Are you sure ?");}` — StuperUser, Nov 27 '12 at 11:45

MadSkunk · Accepted Answer · 2012-11-27T12:16:04.457

17

Try...

<a title="Delete User" onclick="return confirm_click();" href="http://www.google.com"><i class="icon-remove-sign">DELETE</i></a>

...instead.

You need to return the value of your method, and returning false in an onclick event prevents the default behaviour (which in this case would be to navigate to the href).

edited Nov 27 '12 at 12:16

answered Nov 27 '12 at 11:40

MadSkunk

3,309
2
32
49

Well, if it solves your problem flag it as an answer... – Guarita Nov 27 '12 at 12:20
@Guarita I have to wait for 15 minutes first i suppose. That's why couldn't accept it quickly – mirza Nov 27 '12 at 13:00
Oops, my bad... I wasn't aware of that rule in the community. Thought you had forgotten to check it correct. :) – Guarita Nov 27 '12 at 17:50

score 12 · Answer 2 · answered Nov 27 '12 at 11:44

12

Try

<a href='/path/to/action' onclick="return confirm('Are you sure ?')">Delete</a>

answered Nov 27 '12 at 11:44

lostsource

21,070
8
66
88

score 3 · Answer 3 · answered Nov 27 '12 at 11:48

Here is my code:

<a title="Delete User" id="delete" href="http://www.google.com"><i class="icon-remove-sign">DELETE</i></a>
<script type="text/javascript">
document.getElementById('delete').onclick = function(e){
    if( !confirm('Are you sure?') ) {
        e.preventDefault();
    }
}
</script>

and I think we avoid using 'onclick' and so on in HTML in order to make HTML and JavaScript separate

score 0 · Answer 4 · answered Nov 27 '12 at 11:41

0

This javascript will do the job

function confirmDelete(delUrl) 
    {
        if (confirm("Sample message")) 
        {
            document.location = delUrl;
        }
    }

Obviously you have to assing it to

<a href="javascript:confirmDelete('yourPath')">Delete</a>

answered Nov 27 '12 at 11:41

DonCallisto

29,419
9
72
100

I agree, I don't like your solution much either (sorry!), but being downvoted and not knowing why is not helpful. – MadSkunk Nov 27 '12 at 12:13
Hey, it wasn't me who downvoted you, I was agreeing that I think you need to know why you were downvoted! – MadSkunk Nov 27 '12 at 14:14
@MadSkunk yeah, I know. I was only try to explain that to "others" who reads :) – DonCallisto Nov 27 '12 at 14:15

score 0 · Answer 5 · answered Nov 27 '12 at 11:44

0

<body onunload="return confirm_click()">

When the page is going to be unloaded your confirm message is prompted

A resource about unload event: http://www.w3schools.com/jsref/event_onunload.asp

answered Nov 27 '12 at 11:44

SaidbakR

13,303
20
101
195

Not a good answer, what if the page is unloaded for another reason? – MadSkunk Nov 27 '12 at 11:46
It is a general and global solution. – SaidbakR Nov 27 '12 at 11:47

How to confirm navigation for a link in a href tag?

5 Answers5

Linked