2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

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

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

evtSet.js
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に渡してやります。

kaiketsu.js(一部抜粋)
 :
if (hash_parameter) {
  location.hash = '#' + hash_parameter;
}
 :

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

何か参考になれば。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?