Laravelの戻るボタンの実装方法いろいろ｜値を前のフォームまで保持、戻るボタンを禁止する

Laravelのbladeで作ったフォームに「戻るボタン」を実装する方法をお伝えします。

また逆に戻るボタンのクリックを禁止する方法も説明します。

Laravelだからというより、ほぼjavascriptの説明になってしまいますがどうぞ！

Laravelの戻るボタンの実装

ここでは２つの方法があります。

戻るボタンとはいっても、あなたが狙いたい挙動によって使う方法が変わってきます。

利用イメージに合わせてコピペして使ってください！

javascriptのhistory.back();で戻るボタンをつくる方法

<button class="rounded-md bg-gray-800 text-white px-4 py-2" onClick="history.back();">戻る</button>

history.back()はLaravelのメソッドではなく、Javascriptのメソッドです。

ブラウザの持っているページ遷移の１つ前のURLに飛ぶことができます。

この方法のメリットは、このページに遷移してくる前のページがどこだったとしても前のページに戻ることができます。

逆にデメリットは、どこに戻るか分からないことです。

よくある 一覧ページ→詳細ページ→一覧ページに戻る のような戻すページが決まっている場合には次のaタグで戻るボタンを作るほうがいいと思います。

ちなみにonClickは最近あまり使わないです。僕は動けば何でもいい派なので問題ありませんが、会社によってはコードレビューで戻されることがあります。

そのときはこうしましょう。addEventListenerを使って戻るボタンのクリックイベントを拾います。

<button id="btn--back" class="rounded-md bg-gray-800 text-white px-4 py-2">戻る</button> <script> const back = document.getElementById('btn--back'); back.addEventListener('click', (e) => { history.back(); return false; }); </script>

history.back()が効かない場合

<button type="submit" ...

typeがsubmitだとhistory.backが効かないようです。

type=”button”にしてあげれば効くと思います。

それでも効かない場合にはブラウザの開発者ツールのconsoleでjavascriptのエラーが発生していないか確認しましょう。

chromeならF12で立ち上げることができます。

リンクで戻るボタンをつくる方法

<a class="rounded-md bg-gray-800 text-white px-4 py-2" href="{{ route('users.index') }}">戻る</a>

これ単純にリンクで戻したいページを指定しただけです。

ただし普通のリンクだとボタンっぽくないので、CSSで（ここではtailwind css）ボタンの見た目にしてあげましょう。

ほら、ボタンに見えるでしょ。

ただしこれは、ユーザを戻したい画面が固定されている場合です。

ユーザが色んなページ、なんなら外部サイトから来た場合にももとのページに戻したい場合には↑で説明したhistory.back()を使ってください。

Laravelの戻るボタンの禁止

これはJavaScriptで禁止することになります。

禁止するのって、その多くが送信ボタンを押した後、ブラウザが待機状態のときに戻るボタンを押されないようにしたいのかなと思います。

<button id="btn--back" class="rounded-md bg-gray-800 text-white px-4 py-2">戻る</button><button id="btn--submit" class="rounded-md bg-gray-800 text-white px-4 py-2">登録する</button> <script> const submit = document.getElementById('btn--submit'); submit.addEventListener('click', (e) => { const back = document.getElementById('btn--back'); back.setAttribute("disabled", true); return false; }); </script>

これをやればクリックできない状態にできます。

aタグでボタンを作っている場合にはhrefを削除のがいいと思います。

単純にjavascriptのremoveAttributeメソッドを使います。

<a id="btn--back" class="rounded-md bg-gray-800 text-white px-4 py-2">戻る</a><button id="btn--submit" class="rounded-md bg-gray-800 text-white px-4 py-2">登録する</button> <script> const submit = document.getElementById('btn--submit'); submit.addEventListener('click', (e) => { const back = document.getElementById('btn--back'); back.removeAttribute("href"); return false; }); </script>

ブラウザバック対策

僕は実装したことがありませんが、こちらの記事を参考にさせていただきました。

history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
  history.go(1);
});

引用元：https://pisuke-code.com/javascript-prohibit-browser-back/

scriptタグでこちらを指定すればいいようです。

戻るボタンで値を保持したいとき

フォームを複数の画面にまたがって作り、最後にPOSTでサーバに送信して

javascriptで画面を切り替える、という画面UIにしておけば難なく保持できます。

でもきっとあなたが探している答えはこれではないですよね。

答えはセッションを使いましょう。

こうやってPOSTするたびにコントローラ側でセッションに値を追加していきます。

session(['key' => 'value']);

そして次の画面にリダイレクトしたときのコントローラでkey名で取得します。

session('key');

これでセッションに値があるときには画面のフォームに値をセットしてあげましょう。