Stop an anchor from loading on javascript confirm

Question

I was under the impression that this was formed correctly, but here it is forwarding to the anchor href (clicking through? what should I call this?) whether or not the user selects cancel or okay.

<script type="text/javascript">
function myconfirm(my_string)                                                 
{                       
 var agree = confirm('Are you sure you want to remove ' + my_string + '?');
 if(agree)                                                                       
 {                                                                               
  return true;                                                            
 }       
 else                                                                            
 {                                                                               
  return false;
 }
}                                                                                       
</script> 

and the anchor

<a href="example.com/?remove=yes" onclick="myconfirm('my_string')">My String</a> 

Answer 1

You're not returning anything from the onclick handler. Do

onclick="return myconfirm('my_string');"

Also, you can shorten that if clause to just

return agree;

Or even just

return confirm('Are you sure you want to remove ' + my_string + '?');

Answer 2

Put "javascript:void(0)" as the href and then handle everything in the onclick, including the location.href change, if needed.

Answer 3

Return false in the onclick to stop the event.

onclick="if( !myconfirm('my_string') ) { return false; }"

Or simply:

onclick="return myconfirm('my_string');"

Answer 4

In onclick you should return value of myconfirm: onclick="return mycnfirm('my_string')". By the way, you could just return the result of confirm in your myconfirm:

 function myconfirm(my_string) {
      return confirm('Are you sure you want to remove ' + my_string + '?');
 }

Answer 5

Matti's right about the need to return something. However:

<a href="example.com/?remove=yes" onclick="myconfirm('my_string')">My String</a> 

Don't use a link for this. Anything that has an active effect like a removal should be a form with method="post", not a form or link that causes GET, and the server-side script that does the removing should only accept POST requests.

Accepting GET for non-idempotent actions, as well as being against the standard, can lead to a variety of amusing problems.

You can style a form submit button so it doesn't look like a button, if you really want to:

<form class="confirm" method="post" action="/remove" title="remove my string"><div>
    <input type="submit" class="unbutton" value="My String" />
</div></form>

.unbutton {
    border: none; padding: 0;
    background: transparent; color: blue;
    text-decoration: underline; cursor: pointer;
}

You can also avoid having to use inline event handler attributes by assigning them from JS:

// Find forms with confirm class and bind to them
//
for (var i= document.forms.length; i-->0;)
    if (document.forms[i].className==='confirm')
        document.forms[i].onsubmit= getConfirmation;

// Prompt user to allow submission or not
//
function getConfirmation() {
    return confirm('Are you sure you wish to '+this.title+'?');
}