Laravelで複数の入力フォームを一括で処理する方法（配列入力）

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

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で配列入力を受け取る方法

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. 動的に入力フォームを増やす

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>

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

4. 配列入力の注意点とポイント

4. 配列入力の注意点とポイント

• 同じ種類の入力は名前に[]を付けて配列として送信する
• ControllerではRequest::input()で配列として受け取る
• バリデーションはfruits.*のように書くと便利
• 動的に入力フォームを増やす場合はJavaScriptを活用する
• 配列入力を使うことで、複数データを一括で処理できる