Geek Answers Handbook

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

I use Javascript to change the form URL when submitting the form. If this URL contains a hash string (#), Internet Explorer ignores it and simply sends the html part before. 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 "post" then it will be fine. If I use "get", IE lands on page2.html, but without #hello in the url.

This happens whether I use jquery or just 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 (suppose I need to save the method as "get", and that I have to use the hash in the url and that I have to use Javascript to dynamically change this action)?

+4
source share
3 answers

In the end, we decided to just update window.location.href to go to a new location, rather than submit the form. This may seem like a strange answer, but in fact the way we processed our form meant that it was not a problem. those. we turned off all form fields (therefore, no requests were added to the URL), and then generated one of several SEO-oriented URLs based on what the form fields contained, and then updated the form action and submitted form. So, now we do all this, but don’t bother submitting the form, just change the page layout.

0
source

Testing yourself in IE8 shows that it insists that the hash ( #hello ) appears after the query string ( ?foo=bar ) in the URL. Unfortunately, your form does not do this for you, and there is no way to force it to do this when you submit the form.

Try to code the hash in the form:

 <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:

 <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>
+4
source

I believe that IE just behaves differently with the hash, and I do not think that it is intended for use in this estate.

In javascript below the same results will be displayed ... displayed in FF, not IE

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

At least you know that this is not a javascript issue. I lied about the lol oops question mark.

+2
source

More articles:


All Articles