先生と生徒の会話形式で理解しよう

生徒

「先生、Laravelで同じ種類の入力フォームを複数作った場合、まとめて処理することはできますか？」

先生

「はい、できます。フォームの名前に[]を付けることで、複数の入力を配列としてまとめて送信できるんです。」

生徒

「配列って何ですか？ちょっと難しそうです…」

先生

「配列とは、同じ種類のデータを順番にまとめて管理できる箱のようなものです。複数の果物の名前をまとめて送る場合、配列に入れて一度に扱えるようにするイメージです。」

1. 配列入力フォームの作り方

同じ種類の入力をまとめて送信する場合、HTMLのinputやtextareaの名前の末尾に[]を付けます。例えば、果物の名前を3つ入力できるフォームは次のように書きます。


<form action="{{ route('form.submit') }}" method="POST">
    @csrf
    <input type="text" name="fruits[]" class="form-control mb-2" placeholder="果物を入力">
    <input type="text" name="fruits[]" class="form-control mb-2" placeholder="果物を入力">
    <input type="text" name="fruits[]" class="form-control mb-2" placeholder="果物を入力">
    <button type="submit" class="btn btn-primary">送信</button>
</form>

これで送信すると、同じ名前の入力がまとめてfruitsという配列として送られます。

2. Controllerで配列入力を受け取る方法

LaravelのControllerでは、Requestオブジェクトを使って配列を簡単に受け取れます。


public function submit(Request $request)
{
    // バリデーションで配列の各要素をチェック
    $request->validate([
        'fruits.*' => 'required|string|max:50',
    ]);

    // 配列として値を取得
    $fruits = $request->input('fruits');

    foreach ($fruits as $fruit) {
        // 各入力を処理
        echo $fruit . '<br>';
    }
}

fruits.*と書くことで、配列の各要素にバリデーションを適用できます。例えば、空欄の入力を禁止したり、文字数制限をかけたりできます。

3. 動的に入力フォームを増やす

ユーザーが必要に応じて入力欄を追加できるようにするには、JavaScriptで動的にinputを追加します。


<div id="fruits-container">
    <input type="text" name="fruits[]" class="form-control mb-2" placeholder="果物を入力">
</div>
<button type="button" class="btn btn-secondary mb-2" id="add-fruit">入力欄を追加</button>

<script>
document.getElementById('add-fruit').addEventListener('click', function(){
    var container = document.getElementById('fruits-container');
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'fruits[]';
    input.className = 'form-control mb-2';
    input.placeholder = '果物を入力';
    container.appendChild(input);
});
</script>

これでユーザーは自由に入力欄を増やせるので、複数のデータを効率よく送信できます。