入力画面でリロードしたらフォームのセッションデータをリセットしたいと言われました
通常であればリセット用のボタンを用意するところなのですが、リセットボタンは設置せず更新ボタンを押された時にセッションデータを消すような仕組みを作りました。
個人的に？な感じでしたが、備忘録的に書き残しておきます。
作ったフォームの使用
作成したフォームは「入力用ページ」「確認用ページ」「送信用ページ」といった形で3ページを遷移しながら最終的に送信するようなものでした。
- 入力用ページでバリデーションを行い、問題がなければ確認用ページへといった要望があったので、jsを使いバリデーションをする
- 確認用ページは入力内容を表示しつつ、送信するか戻るか選択するだけのページ
- 確認用ページから入力用ページに戻ってきたときは、入力してあった内容を残してほしい
ここまではよくある形なのでいいのかなと思いましたが、確認ページから戻った時にリセットボタンは設置せず、更新されたらすべてリセットというのが今回の仕様でした。
入力内容修正に来た人が更新ボタンを押して、更にリセットしたいと思うのかは謎ですが工夫すればうまくいきそうなので実装してみました
リロード判定の方法とセッションデータの削除方法
調べたところPHPにリロード判定できそうな物は見当たらなかったので他の方法を使ってリロード判定するしかありません。
そこで、JavaScriptの「window.performance.navigation.type」を使ってリロード判定する方法を取りました。
リロード判定ができた時点でのセッションデータの削除は不可能だと思うので、リロードされた時に、同じページにtype=”hidden”で隠しておいたフォームからデータを送信する仕組みを作り、そのデータが受け取れた場合はセッションデータを消すといった流れでコードを書いてみました
まず準備としてHTMLの方でtype=”hidden”のフォームを仕込んでおきます。
メソッド属性はここでは確認がしやすいようにgetにしていますがpostでも大丈夫
|
1 2 3 |
<form action="#" method="get" id="reload"> <input type="hidden" name="reload" value="true"> </form> |
リロード時に「window.performance.navigation.type」で得られる値は「1」になるので、if分を使ってリロード時にtype=”hidden”で隠しておいたフォームからメッセージを送るような処理を仕込みます。
フォームの送信はsubmitメソッドを使えばjQueryから制御できるのでこちらのメソッドを使って送信してしまいましょう
|
1 2 3 |
if (window.performance.navigation.type === 1) { $('#reload').submit(); } |
あとはphpファイルの先頭にデータが送信されていたときの処理を書くだけでおしまい
|
1 2 3 4 5 6 7 |
<?php session_start(); if(isset($_GET['reload'])){ unset($_SESSION['mail']);//消したいセッションデータ } ?> |
