Ajax通信したいのにformでenterキー押下するとsubmitされる件

htmlのformタグ内のテキストフィールド(input type=”text”)にフォーカスが当たっている時、エンターキーを押下するとブラウザ君が気を利かせてサーバーにサブミットを送信してくれます。
↓のような実装の時

<form>
  <input type="text"/> ←このテキストフィールド上でエンター押下するとサブミットされる
</form>

サーバーとのやり取りにAjaxを使用する際は、formタグを使わないようにhtmlとjavascriptを実装すれば問題ありませんが、ファイルアップロード等でフォーム内を丸ごとAjaxでサーバーに送信したい場合など、勝手にサブミットされちゃ困るんですがという事態が発生します。
この問題を解消するにはformタグにonsubmit=”return false”を指定します。

<form onsubmit="return false">
  <input type="text"/> 
</form>

これにより、onsubmitイベントハンドラの実行が中断されるようになりますので、結果としてsubmit送信しても何も起こらなくなります。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>