ブラウザバック時にFORM送信された値が保持されない

概要

取り扱っているシステムでブラウザバック時にFORM送信された値が保持されない箇所があったので原因を調査した。

状況

選択肢1と選択肢2が存在し以下の流れでブラウザバックをする。

  1. 選択肢1の値はサーバサイドで作られる
  2. 選択肢1の選択に追従して選択肢2の値をXHR(Ajax等)で取得して変更する(初期表示の際は選択肢1の値を元にXHRでデータ取得をする)
  3. 選択肢2を選択する
  4. ブラウザバック

そうすると選択肢1ではFORMで送信した値が保持されるが、選択肢2では値が保持されない。 気づく人はこの時点でオチがわかるかもしれないが原因は以下。

原因

ブラウザバック時に選択肢1と選択肢2で選択した値が、前画面の選択肢1と選択肢2にセットされる。 選択肢1のデータはサーバサイドで作られるため、view上には選択肢1の収まるデータが存在するためブラウザバックしても値は保持される。 この際、選択肢2のデータリストは選択肢1の値をもとにXHRで取得されるため、選択肢2の初期のデータリストは空っぽである。初期状態の選択肢2のデータリストが空のため、ブラウザバック時に選択肢2が収まる場所がないため、選択肢2の値が消滅してしまう。

対策

  • 選択肢2に入りうる値をサーバサイド側でviewに詰め込む
  • 選択肢2の変更に追従するhiddenタグを用意する。選択肢2の値が変更されたらhiddenの値を利用して初期状態をセットしてあげる