IEでJSからsubmit()できないことがある件。
<a href="javascript:;" onclick="doSubmit();">送信!</a> <form action="test.php" method="POST" id="testForm" name="testForm"> <input name="testVal" type="hidden" value="テストだよ"> </form>
上記のようなHTMLがあるとして、
function doSubmit(){ document.getElementById('testForm').submit(); }
上記のようなJS関数を実行してフォームを送信しようとすると、
Firefoxでは問題なく送信できるが、IEでは送信できない(>_<)
まず、HTMLを
<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a> <form action="test.php" method="POST" id="testForm" name="testForm"> <input name="testVal" type="hidden" value="テストだよ"> </form>
と修正して、
function doSubmit(){ document.getElementById('testForm').submit(); return false; }
JSはこのように変更。
何をしたかというと、<a>のhrefをvoid(0)で無効化して、さらに、onclickはfalseを返すようにする。IEではどうやら、JS関数の中のsubmit()より、<a>の働きが優先されるようで、これらをすべて無効化する必要があるよう。
これで半日悩んだ。
ある意味正しいような、でも、なんか納得いかない(>_<)
IEはツンデレだ・・・いやツンツンしてるだけか(爆
ちなみに、
<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a> <form action="test.php" method="POST" id="testForm" name="testForm"> <input name="testVal" type="hidden" value="テストだよ"> <input type="submit" name="submit" id="submit" value="送信" /> </form>
こんな風に<form>タグの中に「submit」という名前の要素が入ると、submit()ができなくなる。これも注意。
JSは何でもかんでもオブジェクトなので、同じ名前のものがあれば、当然そちらで上書きされる。
迂闊な名前をつけるのはやめよう。
コメントを残す