IEでformにハッシュ値を渡せない件

URLにハッシュ値を付けて操作したいが、IEではうまくいかない

最初に言っておくと、Chrome, FireFox, Safari では問題なく出来ます。

遷移先のURLでonloadイベントでlocation.hashを解釈して、location.hashが存在すればajaxを実行する操作をやりたかったのですが、そのときにハマりました。

例えばjQueryなんかでフォーム要素を書き変えたい場合

var evtsend = function (at) {
  $('form[name="hogeForm"]').attr("action", at.attr("name"));
  $('a#set').trigger('click');
}

$('#hoge').click(function() {
  evtsend($(this));
});

id="hoge"を持つ要素をクリックしたらhogeFormのactionをクリックした要素のname属性から引っ張って、a#setをクリックさせてformをsubmitさせるコードです。

ここで、たとえばクリックする要素のnameにハッシュがあればどうなるでしょうか。

<div id="hoge" name="#hogehoge">クリックしてや!</div>

みたいな。

実際にIEでやると、formのaction属性は変更されません。

form内のinput要素に含ませる場合も同じ。ハッシュ値は渡せないようです。

stackoverflowにはこんな記事が載っていました。
Bug in IE when using Javascript to change a form action, when method=get and URL contains a hash

上記の記事を参考に、解決策を練ってみたいと思います。

とにかく、ハッシュを渡せないわけだから、遷移元でhiddenパラメータにhashという名前を付けた値をいれ、ハッシュを取り除いたものをvalueとして渡します。

で、formからnameにhashが含まれているパラメータを取り出し、ハッシュをつけてlocation.hashに渡してやります。

 :
if (hash_parameter) {
  location.hash = '#' + hash_parameter;
}
 :

自分はRails使ってたので、gonオブジェクトに値を渡して解決させました。。

何か参考になれば。