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>