formタグでsubmitしてもページ遷移しないようにする

高瀬 裕介 37,403views 更新:2013年12月5日

通常HTMLフォームはsubmitボタンがクリックされたら中のinputタグの内容をすべてパラメータに含めてactionで指定されたURLにアクセス(ページ遷移)します。

たとえば、下記のようなHTMLでフォームにhogeと書いてsearchボタンをクリックすると/search?q=hogeというURLに遷移します。

<form action="/search" method="GET">
  <input name="q"/>
  <input type="submit" value="search"/>
</form>

AipoのフォームのようにAjaxで通信を行う場合や、Javascriptでその他の処理を行って現在のページに内容を反映させたい場合は、formのonsubmitで最後にfalseを返すようにします。

下記のようにすると、doSomething()を実行してその後でページ遷移しなくなります。

<form action="/search" method="GET" onsubmit="doSomething();return false;">
  <input name="q"/>
  <input type="submit" value="search"/>
</form>

注意点として、doSomething()の途中でエラーが発生してしまうとreturn falseが呼ばれずにページが遷移してしまいます。どうしてもページを遷移させたくないときはdoSomethingの中で必ずエラーをキャッチするような機構にしておきましょう。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません