Bug in IE when using Javascript to change a form action, when method=get and URL contains a hash

Question

I'm using Javascript to change a form's URL when you submit the form. If that URL contains a hash string (#), then Internet Explorer ignores it and just submits to the part of the html before that. Firefox and Chrome are fine.

Demonstration:

<script type="text/javascript">
function changeURL() {
    var myform = document.getElementById('myform');

    myform.setAttribute("action", "page2.html#hello"); 

    return false;
}
</script>

<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
    <input type="submit">
</form>

If I change the method to a "post" then it's fine. If I use a "get", IE lands on page2.html but without the #hello in the URL.

This happens regardless of if I use jquery or only javascript, tried each of the following:

myform.action = "page2.html#hello";

myform.attr("action", "page2.html#hello");

myform.get(0).setAttribute("action", "page2.html#hello"); 

Any suggestions (assume that I have to keep the method as a 'get', and that I must use a hash in the URL, and that I must use Javascript to change this action dynamically)?

Answer 1

Testing on my own in IE8 reveals that it does insist that the hash (#hello) come after the query string (?foo=bar) in a URL. Sadly, your form doesn't do this for you and there's no way to force it to do so when submitting the form.

Try encoding the hash in the form instead:

<script type="text/javascript">
function changeURL() {
    var hidden = document.createElement('input');
    hidden.setAttribute("type", "hidden"); 
    hidden.setAttribute("name", "hash"); 
    hidden.setAttribute("value", "hello"); 
    var myform = document.getElementById('myform');
    myform.setAttribute("action", "page2.html"); 
    myform.appendChild(hidden); 
    // return false;
}
</script>
<form id="myform" action="page1.html" method="get" onsubmit="changeURL()">
    <input type="submit">
</form>

And at the top of page2.html, extract it back out:

<script type="text/javascript">
var qs = window.location.search.substring(1);
var qsarr = qs.split("&");
for (var i=0; i<qsarr.length; i++) {
    var tarr = qsarr[i].split("=");
    if (tarr[0]==="hash") {
        window.location.hash = tarr[1];
    }
}
</script>

Answer 2

I believe that IE just behaves differently with the hash and I don't think it is is meant to be used in this manor.

No javascript in the following will produce the same results...displays in FF and not in IE

<form action="#test" method="get">
    <input type="text" value="test" />
    <input type="submit" />
</form>

At least you know it's not a javascript problem. I lied about the question mark lol oops.

Answer 3

In the end we decided we could just update window.location.href to go to the new location rather than submit the form. This might seem like an odd answer, but actually the way we were handling our form meant this wasn't a problem to do. i.e. we were disabling all our form fields (hence no querystring being appended to the URL normally), then generating one of several different SEO-friendly style URLs based on what the form fields contained, then updating the form action and submitting the form. So now we do all that but don't bother submitting the form, just change the page location.