Laravel 5.6动态输入框ID递增及求和校验问题

我来帮你搞定这个动态输入框的问题，下面是完整的实现方案，涵盖动态ID递增、实时总和计算和提交校验：

1. 完善Blade模板（支持动态增删输入框） #

先把你的表单补充完整，既支持初始输入框渲染，也能动态添加/删除输入框：

<form method="post" id="customExamForm" action="{{ route('exams.custom') }}">
    {{ csrf_field() }}
    <h3 class="page-title">Сэдэв</h3>
    <div class="panel panel-default">
        <div class="panel-heading"> Сэдэв сонголт </div>
        <div class="panel-body">
            <!-- 输入框容器 -->
            <div id="scoreInputsContainer">
                <!-- 渲染初始输入框 -->
                @foreach ($duplicates as $index => $item)
                    <div class="input-group mb-3">
                        <input type="number" 
                               class="form-control score-input" 
                               id="score_{{ $index + 1 }}" 
                               name="scores[]" 
                               value="{{ old('scores.' . $index, 0) }}"
                               min="0"
                               step="1">
                        <button type="button" class="btn btn-danger remove-input">Устгах</button>
                    </div>
                @endforeach
                <!-- 如果没有初始数据，默认生成一个输入框 -->
                @empty($duplicates)
                    <div class="input-group mb-3">
                        <input type="number" 
                               class="form-control score-input" 
                               id="score_1" 
                               name="scores[]" 
                               value="0"
                               min="0"
                               step="1">
                        <button type="button" class="btn btn-danger remove-input">Устгах</button>
                    </div>
                @endempty
            </div>
            <!-- 添加输入框按钮 -->
            <button type="button" id="addScoreInput" class="btn btn-primary">Нэмэх</button>
            <!-- 总和显示区域 -->
            <div class="mt-3">
                <strong>Нийт дүн: </strong><span id="totalScore">0</span>
            </div>
            <!-- 表单提交按钮 -->
            <button type="submit" class="btn btn-success mt-3">Илгээх</button>
        </div>
    </div>
</form>

2. JavaScript实现核心功能 #

把这段脚本放在模板底部或者外部JS文件中，实现动态ID生成、总和计算和提交校验：

document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('scoreInputsContainer');
    const addButton = document.getElementById('addScoreInput');
    const totalSpan = document.getElementById('totalScore');
    const form = document.getElementById('customExamForm');

    // 计算所有输入框的数值总和
    function calculateTotal() {
        const inputs = document.querySelectorAll('.score-input');
        let total = 0;
        inputs.forEach(input => {
            const value = parseInt(input.value) || 0;
            total += value;
        });
        totalSpan.textContent = total;
        return total;
    }

    // 生成下一个递增的输入框ID
    function getNextInputId() {
        const inputs = document.querySelectorAll('.score-input');
        let maxIdNum = 0;
        inputs.forEach(input => {
            const idNum = parseInt(input.id.split('_')[1]);
            if (idNum > maxIdNum) maxIdNum = idNum;
        });
        return `score_${maxIdNum + 1}`;
    }

    // 绑定添加输入框事件
    addButton.addEventListener('click', function() {
        const newId = getNextInputId();
        const inputGroup = document.createElement('div');
        inputGroup.className = 'input-group mb-3';
        inputGroup.innerHTML = `
            <input type="number" 
                   class="form-control score-input" 
                   id="${newId}" 
                   name="scores[]" 
                   value="0"
                   min="0"
                   step="1">
            <button type="button" class="btn btn-danger remove-input">Устгах</button>
        `;
        container.appendChild(inputGroup);

        // 给新输入框绑定输入事件
        inputGroup.querySelector('.score-input').addEventListener('input', calculateTotal);
        // 给新删除按钮绑定事件
        inputGroup.querySelector('.remove-input').addEventListener('click', function() {
            // 至少保留一个输入框
            if (document.querySelectorAll('.score-input').length > 1) {
                inputGroup.remove();
                calculateTotal();
            } else {
                alert("Хамгийн багадаа нэг оруулах талбай байх ёстой!");
            }
        });
    });

    // 绑定初始删除按钮事件
    document.querySelectorAll('.remove-input').forEach(button => {
        button.addEventListener('click', function() {
            if (document.querySelectorAll('.score-input').length > 1) {
                this.parentElement.remove();
                calculateTotal();
            } else {
                alert("Хамгийн багадаа нэг оруулах талбай байх ёстой!");
            }
        });
    });

    // 绑定初始输入框的输入事件
    document.querySelectorAll('.score-input').forEach(input => {
        input.addEventListener('input', calculateTotal);
    });

    // 表单提交前的校验
    form.addEventListener('submit', function(e) {
        const total = calculateTotal();
        if (total >= 50) {
            e.preventDefault();
            alert("Нийт дүн 50-с их байна! Илгээх боломжгүй.");
        }
        // 总和小于50时，表单正常提交
    });

    // 页面加载时先计算一次总和
    calculateTotal();
});

关键细节说明 #

• 动态ID递增：通过getNextInputId函数遍历现有输入框，提取ID中的数字部分，取最大值加1生成新ID，确保ID唯一且连续递增。
• 实时总和计算：监听每个输入框的input事件，每次输入变化时自动重新计算总和并更新显示。
• 提交校验：在表单提交时触发总和计算，若总和≥50则阻止提交并弹出提示，否则允许表单正常提交。
• 输入框保护：限制用户删除所有输入框，避免表单出现异常。

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