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

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.