Laravel中如何实现nama_menu字段插入多个值？

问题根源 #

HTML中多个同名name的输入框会互相覆盖，后端只能获取最后一个值。要接收多个值，需将输入框的name改为数组格式，同时调整数据库字段存储方式和后端处理逻辑。

步骤1：修改视图Blade代码 #

将nama_menu、jumlah的name改为数组形式，同时修正总金额的传递逻辑（避免循环中重复覆盖total_pembayaran）：

<ul class="order-details-form mb-4">
    <li><span>Product</span><span>Jumlah</span> <span>Total</span></li>
    @foreach($fi as $z)
    <!-- 改为数组格式，ID加循环索引避免重复 -->
    <input type="hidden" value="{{$z->name}}" name="nama_menu[]" id="nama_menu_{{$loop->index}}">
    <input type="hidden" value="{{$z->quantity}}" name="jumlah[]" id="jumlah_{{$loop->index}}">
    <!-- 单个商品总价改名，避免覆盖总金额 -->
    <input type="hidden" value="{{$z->price * $z->quantity}}" name="subtotal[]" id="subtotal_{{$loop->index}}">

    <li><span>{{$z->name}}</span ><span>{{$z->quantity}}</span> <span>Rp. {{($z->price * $z->quantity)}}</span></li>
    @endforeach
    <!-- 单独传递订单总金额 -->
    <input type="hidden" value="{{ Cart::getTotal() }}" name="total_pembayaran">
    <li><span>Total</span> <span>Rp. {{ Cart::getTotal() }}</span></li>
</ul>

步骤2：调整History模型配置 #

需让模型支持数组与JSON的自动转换，同时确保字段在可填充列表中：

// app/Models/History.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class History extends Model
{
    // 允许批量赋值的字段
    protected $fillable = [
        'nama', 'provinsi', 'nama_menu', 'jumlah', 'kota', 'total_pembayaran', 
        'status', 'kecamatan', 'kelurahan', 'kodepos', 'address', 'whatsapp', 'jenis_pembayaran'
    ];

    // 自动将数组字段转为JSON存入，读取时转回数组
    protected $casts = [
        'nama_menu' => 'array',
        'jumlah' => 'array',
    ];
}

步骤3：修改控制器逻辑 #

接收数组参数，直接赋值给模型（模型会自动处理JSON转换）：

public function store(Request $r){
    // 可选：添加表单验证，确保数组数据合法
    $validated = $r->validate([
        'nama_menu' => 'required|array',
        'nama_menu.*' => 'required|string',
        'jumlah' => 'required|array',
        'jumlah.*' => 'required|integer',
        // 其他字段的验证规则可按需添加
    ]);

    $history = new History();
    $history->nama = $r->nama;
    $history->provinsi = $r->provinsi;
    // 直接赋值数组，模型自动转为JSON存储
    $history->nama_menu = $r->nama_menu;
    $history->jumlah = $r->jumlah;
    $history->kota = $r->kota;
    $history->total_pembayaran = $r->total_pembayaran;
    $history->status = $r->status;
    $history->kecamatan = $r->kecamatan;
    $history->kelurahan = $r->kelurahan;
    $history->kodepos = $r->kodepos;
    $history->address = $r->address;
    $history->whatsapp = $r->whatsapp;
    $history->jenis_pembayaran = $r->jenis_pembayaran;
    $history->save();
    
    return redirect(url('/checkout'))->with(['success' => 'berhasil mengirim pesan whatsapp']);
}

步骤4：调整数据库字段类型 #

确保nama_menu和jumlah字段支持存储JSON格式数据：

1. 若未创建表，在迁移文件中定义字段：

Schema::create('histories', function (Blueprint $table) {
    // 其他字段...
    $table->json('nama_menu');
    $table->json('jumlah');
    // 其他字段...
});

2. 若已创建表，生成迁移修改字段：

php artisan make:migration modify_nama_menu_and_jumlah_in_histories_table

然后在迁移文件中修改：

public function up()
{
    Schema::table('histories', function (Blueprint $table) {
        $table->json('nama_menu')->change();
        $table->json('jumlah')->change();
    });
}

public function down()
{
    Schema::table('histories', function (Blueprint $table) {
        $table->string('nama_menu')->change();
        $table->integer('jumlah')->change();
    });
}

执行迁移：

php artisan migrate

内容的提问来源于stack exchange，提问作者Muhammad Sumbul