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を利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様