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

通常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の中で必ずエラーをキャッチするような機構にしておきましょう。

ハックノートをフォローして
最新情報をチェックしよう

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。


APNコンサルティングパートナー

TOWN株式会社はAmazon公認コンサルティングパートナーです。