Laravel项目中JS动态生成带不同属性的表单DIV及控制器实现咨询

一、前端动态表单实现 #

核心思路是用计数器标记每个生成的区块，输入框采用数组格式命名，后端可直接解析为数组批量处理。

1. HTML结构调整 #

<!-- 表单包裹，提交地址换成你自己的路由 -->
<form action="{{ route('pricing.store') }}" method="POST">
  @csrf
  <!-- 新增按钮 -->
  <button type="button" class="btn btn-primary mb-3" id="addPricingBtn">新增定价条目</button>
  <!-- 定价区块容器 -->
  <div id="pricingContainer">
    <!-- 初始的第一个定价区块 -->
    <div class="container-fluid" style="display:block" id="div_0">
      <div class="fade-in">
        <div class="card">
          <div class="card-header"> pricing </div>
          <div class="card-body">                      
            <div class="body">
              <div class="form-group">
                <label for="carnumber_0">car number</label>
                <input type="text" class="form-control" name="pricings[0][carnumber]" id="carnumber_0" placeholder="car number">
              </div>   
              <div class="form-group">
                <label for="price_0">price</label>
                <input type="text" class="form-control" name="pricings[0][price]" id="price_0" placeholder="price">
              </div>  
              <div class="form-group">
                <label for="minday_0">min day</label>
                <input type="text" class="form-control" name="pricings[0][minday]" id="minday_0" placeholder="min day">
              </div>  
              <div class="form-group">
                <label for="saleprice_0">sale price</label>
                <input type="text" class="form-control" name="pricings[0][saleprice]" id="saleprice_0" placeholder="sale price">
              </div>  
              <div class="form-group">
                <label for="mindaystay_0">min day stay</label>
                <input type="text" class="form-control" name="pricings[0][mindaystay]" id="mindaystay_0" placeholder="min day stay">
              </div>
              <!-- 可选：新增删除按钮 -->
              <button type="button" class="btn btn-danger delete-btn mt-2">删除当前条目</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success mt-3">提交所有数据</button>
</form>

<!-- 定价区块模板，用来复制生成新的区块 -->
<template id="pricingTemplate">
  <div class="container-fluid" style="display:block" id="div__INDEX__">
    <div class="fade-in">
      <div class="card">
        <div class="card-header"> pricing </div>
        <div class="card-body">                      
          <div class="body">
            <div class="form-group">
              <label for="carnumber__INDEX__">car number</label>
              <input type="text" class="form-control" name="pricings[__INDEX__][carnumber]" id="carnumber__INDEX__" placeholder="car number">
            </div>   
            <div class="form-group">
              <label for="price__INDEX__">price</label>
              <input type="text" class="form-control" name="pricings[__INDEX__][price]" id="price__INDEX__" placeholder="price">
            </div>  
            <div class="form-group">
              <label for="minday__INDEX__">min day</label>
              <input type="text" class="form-control" name="pricings[__INDEX__][minday]" id="minday__INDEX__" placeholder="min day">
            </div>  
            <div class="form-group">
              <label for="saleprice__INDEX__">sale price</label>
              <input type="text" class="form-control" name="pricings[__INDEX__][saleprice]" id="saleprice__INDEX__" placeholder="sale price">
            </div>  
            <div class="form-group">
              <label for="mindaystay__INDEX__">min day stay</label>
              <input type="text" class="form-control" name="pricings[__INDEX__][mindaystay]" id="mindaystay__INDEX__" placeholder="min day stay">
            </div>
            <button type="button" class="btn btn-danger delete-btn mt-2">删除当前条目</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2. JS逻辑代码 #

// 初始化计数器，初始已经有1个区块，所以从1开始
let pricingIndex = 1;
const addBtn = document.getElementById('addPricingBtn');
const container = document.getElementById('pricingContainer');
const template = document.getElementById('pricingTemplate');

// 监听新增按钮点击
addBtn.addEventListener('click', () => {
  // 复制模板内容
  const clone = template.content.cloneNode(true);
  // 替换模板里所有的__INDEX__为当前计数器值
  const html = clone.firstElementChild.outerHTML.replaceAll('__INDEX__', pricingIndex);
  // 追加到容器
  container.insertAdjacentHTML('beforeend', html);
  // 计数器自增
  pricingIndex++;
});

// 监听删除按钮点击（事件委托，处理动态生成的删除按钮）
container.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete-btn')) {
    e.target.closest('.container-fluid').remove();
  }
});

二、Laravel后端处理 #

1. 路由配置（routes/web.php） #

use App\Http\Controllers\PricingController;

Route::post('/pricing/store', [PricingController::class, 'store'])->name('pricing.store');

2. 控制器代码（app/Http/Controllers/PricingController.php） #

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Pricing; // 对应你的定价表模型

class PricingController extends Controller
{
    public function store(Request $request)
    {
        // 表单验证，支持批量验证所有条目
        $validated = $request->validate([
            'pricings' => 'required|array',
            'pricings.*.carnumber' => 'required|string|max:255',
            'pricings.*.price' => 'required|numeric|min:0',
            'pricings.*.minday' => 'required|integer|min:1',
            'pricings.*.saleprice' => 'nullable|numeric|min:0',
            'pricings.*.mindaystay' => 'required|integer|min:1',
        ]);

        // 批量插入数据
        foreach ($validated['pricings'] as $pricingItem) {
            Pricing::create($pricingItem);
        }

        // 提交成功后的跳转，可根据需求修改
        return back()->with('success', '所有定价数据提交成功');
    }
}

3. 模型配置（app/Models/Pricing.php） #

确保模型的可写字段包含你要存入的字段：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Pricing extends Model
{
    protected $fillable = [
        'carnumber',
        'price',
        'minday',
        'saleprice',
        'mindaystay',
    ];
}

内容的提问来源于stack exchange，提问作者Mhamad Abu AlGhanam