submitにセットしたonClickの挙動について

javascript

submitにセットしたonClickの挙動がEnterを押してsubmitしたときと、submitをクリックしたときとで挙動が違ったのでそのメモ。

悪い例

<html><body>

<form>
<input type="text">
<input type="submit" value="search" onClick="hoge();">
</form>

<script type="text/javascript">
<!--
function hoge(){
  alert("hoge!!");
}
// -->
</script>

</body></html>

上記のコードで期待することは、formをsubmitしたときに hoge(); が実行されること。上記のコードでformをsubmitする方法は２種類ある。

  1. searchボタンをクリックする
  2. テキスト入力BoxにポインタをあわせてEnterボタンを押す

1は問題ないが2に問題がある。IEでは2ではhoge();が実行されない。Firefoxはhoge();を実行してくれる。

良い例

<html><body>

<form onSubmit="hoge();">
<input type="text">
<input type="submit" value="search">
</form>

<script type="text/javascript">
<!--
function hoge(){
  alert("hoge!!");
}
// -->
</script>

</body></html>

上記のコードで期待する「formをsubmitするときに実行する」ということが明確に記述されている。上記のコードでformをsubmitする方法は２種類ある。

  1. searchボタンをクリックする
  2. テキスト入力BoxにポインタをあわせてEnterボタンを押す

両方共IEでうまくhoge();が実行される。もちろんFirefoxでも問題ない。正しくはこちらだった。

教訓

formをsubmitする時に実行したい関数は onSubmitにセットするべし。