会议详情页表单：如何将选中的票务数量及价格存入数组？

首先先修正你代码里的小问题：你的@foreach($tickets as $ticket)循环里用了$type变量，这应该是笔误，要统一改成$ticket哦，不然会报错。

接下来分后端处理（表单提交后存储）和前端实时收集两种场景来给你方案：

一、后端Laravel处理：提交后生成包含数量与价格的数组 #

当用户提交表单后，你可以在对应的控制器方法里，把提交的票务数量和对应的价格匹配起来，生成目标数组：

1. 先完善你的表单代码 #

确保每个select的value是数量，并且循环变量正确，同时把票务价格存在data-price属性（方便前端，后端也可以从数据库取）：

<form method="post" action="{{route('congresses.registration', ['id' => $congress->id, 'slug' => $congress->slug])}}">
    <ul>
        {{ csrf_field() }}
        @foreach($tickets as $ticket)
            <li>
                <div>
                    <span>{{ $ticket->name }}</span>
                    <span>单价: ${{ $ticket->price }}</span>
                </div>
                <!-- 用ticket的ID作为键更靠谱，避免名称重复的问题 -->
                <select name="tickets[{{ $ticket->id }}]">
                    <option value="0" selected>0</option>
                    @for($i = 1; $i <= 10; $i++) <!-- 假设最多买10张，可按需调整 -->
                        <option value="{{ $i }}" data-price="{{ $ticket->price }}">
                            {{ $i }} 张
                        </option>
                    @endfor
                </select>
            </li>
        @endforeach
        <button type="submit">提交</button>
    </ul>
</form>

2. 控制器里处理提交的数据 #

在congresses.registration对应的控制器方法中，接收请求并生成数组：

public function storeRegistration(Request $request, Congress $congress)
{
    // 初始化存储数组
    $selectedTickets = [];

    // 遍历提交的票务数据
    foreach ($request->input('tickets', []) as $ticketId => $quantity) {
        // 跳过数量为0的票务
        if ($quantity == 0) continue;

        // 从数据库获取对应的票务信息（也可以把价格存在表单隐藏域，减少查询）
        $ticket = Ticket::findOrFail($ticketId);

        // 添加到数组，包含数量、价格、票务名称等信息
        $selectedTickets[] = [
            'ticket_id' => $ticketId,
            'ticket_name' => $ticket->name,
            'quantity' => $quantity,
            'unit_price' => $ticket->price,
            'total_price' => $quantity * $ticket->price // 可选：计算单种票务总价
        ];
    }

    // 现在$selectedTickets就是你需要的数组了，可以存数据库、会话或者用于后续逻辑
    // 示例：存到会话
    session()->put('selected_tickets', $selectedTickets);

    // 或者返回视图/重定向
    return redirect()->back()->with('success', '票务选择已保存');
}

二、前端JavaScript实时收集：用户选择时存入数组 #

如果需要在用户选择票务数量时，实时把数据存入前端数组（比如用于实时计算总价），可以这样做：

// 初始化前端数组
let selectedTicketsArray = [];

// 监听所有票务选择框的change事件
document.querySelectorAll('select[name^="tickets["]').forEach(selectElement => {
    selectElement.addEventListener('change', function() {
        const ticketId = this.name.match(/tickets\[(\d+)\]/)[1]; // 提取票务ID
        const quantity = parseInt(this.value);
        const unitPrice = parseFloat(this.options[this.selectedIndex].dataset.price);
        const ticketName = this.closest('li').querySelector('span:first-child').textContent;

        // 先移除数组中已有的该票务项
        selectedTicketsArray = selectedTicketsArray.filter(item => item.ticket_id != ticketId);

        // 如果数量大于0，添加到数组
        if (quantity > 0) {
            selectedTicketsArray.push({
                ticket_id: ticketId,
                ticket_name: ticketName,
                quantity: quantity,
                unit_price: unitPrice,
                total_price: quantity * unitPrice
            });
        }

        // 测试：打印数组到控制台查看结果
        console.log('当前选中的票务数组:', selectedTicketsArray);
    });
});

这样用户每次修改选择时，selectedTicketsArray都会实时更新，你可以用这个数组做实时计算、页面展示等操作。

小提示 #

• 后端处理时，记得做表单验证，比如校验数量必须是非负整数，避免恶意提交。
• 如果不想每次都查数据库，可以在表单里加隐藏域存储票务价格：<input type="hidden" name="ticket_prices[{{ $ticket->id }}]" value="{{ $ticket->price }}">，后端直接从$request->ticket_prices取价格即可。

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