IE Follows Link Even After onclick="return false;"

Question

I'm writing a Rails 2.3.8 app, and using the standard link_to helper. I have a reasonable number of links that user methods other than GET, so I pass a :method => :whatever option to link_to, and it generates a link with an onclick handler like so (indentation added for readability):

<a
  onclick="
    var f = document.createElement('form');
    f.style.display = 'none';
    this.parentNode.appendChild(f);
    f.method = 'POST';
    f.action = this.href;
    var s = document.createElement('input');
    s.setAttribute('type', 'hidden');
    s.setAttribute('name', 'authenticity_token');
    s.setAttribute('value', '31M3q8SJkRz7f0R80l42Z2W7O2N7ZrzufhWQYql/Zd8=');
    f.appendChild(s);
    f.submit();
    return false;"
  href="/transactions/1015/transcribe"
>
Enter Data
</a>

Now, for whatever reason, IE (both 7 & 8 - the two I've tested) has decided that the return false; at the end there isn't enough to stop it from following the link, and I end up getting two requests to my server: The POST request from the onclick handler, which I want, and the GET request from the link itself, which I don't. In fact, that route doesn't exist for anything other than a POST request, so when the browser follows the GET request, the user gets dumped on a 'Bad URL' error screen. Not good.

Has anyone seen this before, and can tell me what's causing it? Or, better yet, does anyone know a good workaround?

PS: I'd prefer NOT to

1. Monkey-patch link-to, or
2. Write my own version of link_to

but if that's what it takes, that's what it takes. And I'm using jQuery 1.5.something, if that helps.

Answer 1

In general, when IE decides to "ignore" a return false; from an onclick handler, it is because one of the lines before the return false; threw an exception. This will cause a silent failure of the onclick handler, and the browser will then attempt to access the href link. This applies to all browsers, not just IE, but it's often the case that IE will throw exceptions in cases where other browsers will not, hence why it seems that only IE is ignoring the return false;.

One quick patch for this is to set href="#", which will keep the browser on the page even if the onclick handler fails. The proper way to debug it, however, is to wrap your onclick code in something like try { ... } catch (ex) { alert(ex); } to see what the exception is, and then fix the onclick code so that it no longer throws the exception.

Answer 2

To prevent form submission in JQuery, we often use

event.preventDefault();

So in your example, you could use this (as discussed in comments) :

$('a[onclick]').click(function(e) {e.preventDefault();});

Hope that helps!