javascriptでフォームを送信する際に気をつけること
自分ではこういう使い方はしないんだけど、他人が作った部分で嵌ったのでメモ。
ボタンのonclickでsubmitする
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function formSubmit(obj){ obj.form.action="piyo.html"; obj.form.submit(); } //]]> </script> </head> <body> <form action="huga.html" method="post"> <input type="text" name="hoge" value="" /> <input type="button" value="送信" onclick="formSubmit(this)" /> </form> </body> </html>
例として処理をシンプルにしたんだけど、buttonをsubmitした時に、フォームのactionの値を変えたい、という時がたまにあります。フォーム内の要素によって飛び先を変えたい場合などですね。その時、単純に上記のようにしてしまうと、一見うまく行っているように見えるのですが、ある特定の操作の時に不具合がおきてしまいます。
それは、input要素にフォーカスしている時に「Enterキー」を押下した場合です。
フォームの仕様?として、input要素で「Enterキー」を押下すると、フォームのactionで指定した先へ post または get されてしまいます。これは通常、いちいち送信ボタンを押下せずに、フォームを送信できるので便利な機能なのですが、フォームの飛び先を動的に変えたいというプログラマ泣かせの機能です。いや、プログラマ初心者か。
そこで、本来であれば、formタグにonsubmitで処理すれば良いのですが、もっと簡単にてっとり早く修正したい時。
<input type="text" name="hoge" value="" /> ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <input type="text" name="hoge" value="" onkeypress="if(event.keyCode == 13){return false;}">
とEnterキーを押下しても無効になるような処理を加えることで、とりあえず問題は解決できます。ただinputが複数ある場合は、面倒なうえにソースが汚くなるので、onsubmitで処理をすることをオススメします。
追記
ちなみにonsubmitを使った場合のソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function formSubmit(){ document.getElementById("formData").action="piyo.html"; return true; } //]]> </script> </head> <body> <form id="formData" action="huga.html" method="post" onsubmit="return formSubmit()"> <input type="text" name="hoge" value="" /> <input type="submit" value="送信" /> </form> </body> </html>
追記2
コメントでもっとシンプルな書き方を教えていただきました!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function formSubmit(f){ f.action="piyo.html"; return true; } //]]> </script> </head> <body> <form id="formData" action="huga.html" method="post" onsubmit="return formSubmit(this)"> <input type="text" name="hoge" value="" /> <input type="submit" value="送信" /> </form> </body> </html>
thisが便利すぎる…。