Laravel如何根据输入值动态引入并重复渲染Blade表单模板

方案1：无JS纯后端实现（适配不想使用JavaScript的需求） #

该方案通过原生表单自动提交实现动态渲染，无需编写自定义JS：

• 给服务数量输入框套独立的GET表单，绑定原生onchange属性触发表单自动提交
• 后端接收nServices参数后传递到Blade视图，直接通过@for循环加载子模板即可，循环时需传递下标到子模板，方便后续表单提交区分不同组的字段

示例代码：
Blade视图部分：

<!-- 服务数量选择表单 -->
<form method="get" id="serviceCountForm">
    <input type="number" name="nServices" value="{{ old('nServices', $nServices ?? 1) }}" 
           onchange="document.getElementById('serviceCountForm').submit()" min="1" max="20">
</form>

<!-- 业务表单提交区域 -->
<form method="post" action="/你的业务提交路由">
    @csrf
    @for($i = 0; $i < ($nServices ?? 1); $i++)
        {{-- 传递当前组下标到子模板 --}}
        @include('inputs', ['groupIndex' => $i])
    @endfor
    <button type="submit">提交表单</button>
</form>

后端控制器部分：

public function index(Request $request)
{
    $validated = $request->validate([
        'nServices' => 'nullable|integer|min:1|max:20'
    ]);
    return view('当前视图名', [
        'nServices' => $validated['nServices'] ?? 1
    ]);
}

方案2：JS动态渲染（无页面刷新） #

该方案解决外部JS无法调用Blade指令的问题，核心逻辑是提前在Blade中将子模板渲染为HTML字符串存入全局JS变量，外部JS直接调用该变量即可：

• 在Blade视图中预渲染inputs.blade.php模板，用占位符替换可变的下标参数，转义特殊字符后存入全局JS变量
• 外部JS监听数量输入框的变更事件，根据当前数值循环替换占位符生成对应数量的表单组，插入到页面容器中

示例代码：
Blade视图预渲染模板部分：

<!-- 提前将子模板渲染为HTML字符串存入全局变量，外部JS可直接访问 -->
<script>
window.serviceInputTpl = `{{ addslashes(view('inputs')->render()) }}`;
</script>

<!-- 数量输入框 + 表单容器 -->
<input type="number" name="nServices" min="1" max="20" value="1">
<div id="serviceFormContainer"></div>

inputs.blade.php子模板示例（用__INDEX__当下标占位符）：

<div class="service-input-group">
    <input type="text" name="service[__INDEX__][name]" placeholder="服务名称">
    <input type="number" name="service[__INDEX__][price]" placeholder="服务价格">
</div>

JS代码（内联/外部JS均可使用）：

const countInput = document.querySelector('input[name="nServices"]');
const formContainer = document.querySelector('#serviceFormContainer');

countInput.addEventListener('change', function () {
    const targetCount = parseInt(this.value) || 1;
    let formHtml = '';
    for (let i = 0; i < targetCount; i++) {
        // 替换占位符为当前组的真实下标
        formHtml += window.serviceInputTpl.replaceAll('__INDEX__', i);
    }
    formContainer.innerHTML = formHtml;
});

// 页面初始化默认渲染1组
countInput.dispatchEvent(new Event('change'));

提示：该方案提交表单后，后端可直接通过$request->input('service')获取所有服务组的二维数组，无需额外处理字段解析。

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