withInput()の使い方は？確認画面から入力画面へ戻る方法・Laravel

2024年3月16日

【Laravel】確認画面から入力画面へ戻る方法【withInput()の使い方】

Webサイトには会員情報やお問い合わせなど、何れかの情報をフォームで入力するページ。

情報を入力した後は、すぐ登録完了……というわけではなく、入力内容に誤りがないか確認する画面がワンクッション置かれている場合がほとんどです。

確認画面で誤りを発見したら、「戻る」ボタンをクリックして値を保持したまま入力画面に戻る機能を作らなければなりませんよね。

今回はその入力画面と確認画面で値を保持したまま行き来する方法を解説します。

web.phpの記入

Route::get('/register','App\Http\Controllers\RegisterController@index');
Route::post('/register/confirm','App\Http\Controllers\RegisterController@confirm');
Route::post('/register/complete','App\Http\Controllers\RegisterController@complete');

それぞれ上から「入力画面」「確認画面」「完了画面」です。

コントローラの用意と記入

コントローラーの準備と、「入力画面」「確認画面」「完了画面」の処理を行う関数を用意していきます。

コントローラーの準備

コントローラを作成するコマンドを実行します。
今回は「RegisterController」で作っていきます。

php artisan make:controller RegisterController

コントローラーに「入力画面」の処理を追記

コマンドで作成したコントローラーファイルに、入力画面の処理を追記します。

    // 入力画面の処理
    public function index()
    {
        return view('/register');
    }

入力画面の処理はビューファイルを表示するだけの内容なので、難しくないですね。

コントローラーに「確認画面」の処理を追記

次にコントローラーファイルに確認画面の処理を追記します。

    // 確認画面の処理
    public function confirm(Request $request)
    {
        // バリデーション
        $request->validate([
            'name' => ['required','string'],
            'email' =>['required','email'],
        ]);

        $register_data = $request;

        return view('register_confirm',compact('register_data'));
    }

バリデーションを行った後は、入力値を確認画面に渡す処理を書いてます。

コントローラーに「確認画面」の処理を追記

最後に「確認画面」の処理を追記します。

    // 完了画面の処理
    public function complete(Request $request)
    {
        // 戻るボタンをクリックされた場合
        if($request->input('back') == 'back'){
            return redirect('/register')
                        ->withInput();
        }

        // 本来であれば、SQLで登録の処理等を書く

        return view('register_complete');
    }

ここで、確認画面の「戻る」ボタンがクリックされた時、「入力画面」へリダイレクトさせてます。

ただリダイレクトするのではなく、「->withInput();」を追加してリダイレクトすることで、入力画面では「old()」で入力値を表示できるようになります。

ビューファイルの作成

では最後に、「入力画面」と「確認画面」、「完了画面」のビューファイルを作っていきます。

ビューファイルで「入力画面」の作成

@if ($errors->any())
入力内容に誤りがあります
@endif
<form action="{{ url('register/confirm') }}" method="post">
    {{ csrf_field() }}
    <div>
        <label>名前</label>
        <input type="text" name="name" value="{{ old('name') }}">
    </div>
    <div>
        <label>メールアドレス</label>
        <input type="text" name="email" value="{{ old('email') }}">
    </div>
    <input type="submit" value="確認画面へ">
</form>

入力値を保持させるため、忘れずにvalueは「old()」を記載しておきます。
これでバリデーションでエラーだった時に加え、確認画面から「戻る」ボタンをクリックした時にも入力値を保持することができるようになります。

ビューファイルで「確認画面」の作成

<form action="{{ url('register/complete') }}" method="post">
    {{ csrf_field() }}
    <div>
        <label>名前</label>
        {{ $register_data->name }}
        <input type="hidden" name="name" value="{{ $register_data->name }}">
    </div>
    <div>
        <label>メールアドレス</label>
        {{ $register_data->email }}
        <input type="hidden" name="email" value="{{ $register_data->email }}">
    </div>
    <button type="submit">完了画面へ</button>
    <button type="submit" name='back' value="back">戻る</button>
</form>

戻るボタンには「name=’back’ value=”back”」を記載します。

入力内容の表示だけではなく、「type=”hidden”」のinputタグも用意も忘れないようにしましょう！

ビューファイルで「確認画面」の作成


    <div>完了しました。</div>

完了画面には文言だけ記載しました。

最後に実際に操作してみます。

ブラウザで動作確認

ブラウザでアクセスしてみます。
「入力画面」は以下のように表示されます。

適当に入力した後に「確認画面へ」ボタンを押すと、確認画面に遷移して入力した値が表示されます。

「戻る」ボタンを押してみます。

入力画面に戻りつつ、入力値も保持できました！

今回のファイルのまとめ

Route::get('/register','App\Http\Controllers\RegisterController@index');
Route::post('/register/confirm','App\Http\Controllers\RegisterController@confirm');
Route::post('/register/complete','App\Http\Controllers\RegisterController@complete');

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class RegisterController extends Controller
{
    // 入力画面の処理
    public function index()
    {
        return view('/register');
    }

    // 確認画面の処理
    public function confirm(Request $request)
    {
        // バリデーション
        $request->validate([
            'name' => ['required','string'],
            'email' =>['required','email'],
        ]);

        $register_data = $request;

        return view('register_confirm',compact('register_data'));
    }

    // 完了画面の処理
    public function complete(Request $request)
    {
        // 戻るボタンをクリックされた場合
        if($request->input('back') == 'back'){
            return redirect('/register')
                        ->withInput();
        }

        // 本来であれば、SQLで登録の処理等を書く

        return view('register_complete');
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
@if ($errors->any())
入力内容に誤りがあります
@endif
<form action="{{ url('register/confirm') }}" method="post">
    {{ csrf_field() }}
    <div>
        <label>名前</label>
        <input type="text" name="name" value="{{ old('name') }}">
    </div>
    <div>
        <label>メールアドレス</label>
        <input type="text" name="email" value="{{ old('email') }}">
    </div>
    <input type="submit" value="確認画面へ">
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form action="{{ url('register/complete') }}" method="post">
    {{ csrf_field() }}
    <div>
        <label>名前</label>
        {{ $register_data->name }}
        <input type="hidden" name="name" value="{{ $register_data->name }}">
    </div>
    <div>
        <label>メールアドレス</label>
        {{ $register_data->email }}
        <input type="hidden" name="email" value="{{ $register_data->email }}">
    </div>
    <button type="submit">完了画面へ</button>
    <button type="submit" name='back' value="back">戻る</button>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
    完了しました。
    </div>
</body>
</html>