动态生成子年龄输入框提交仅最后一个值生效问题求助

问题说明 #

根据子女人数字段动态生成对应数量的儿童年龄输入框，但表单提交时后端仅收到最后一个输入框的年龄值，期望chd_age字段以逗号分隔的字符串格式（如"13,21"）提交所有儿童年龄。

原代码问题分析 #

1. 同名输入框覆盖：所有动态生成的输入框使用相同的name="chd_age"，表单提交时同名字段会互相覆盖，最终仅保留最后一个输入框的值。
2. 局部FormData无效：函数内部创建的FormData是局部变量，和表单实际提交的FormData不是同一个对象，修改这个局部对象不会影响最终提交的数据。
3. 事件监听逻辑冗余：依赖输入框的change事件维护数组，但没有同步到表单提交的核心流程中。

修复方案 #

方案1：通过表单提交事件统一收集数据（推荐） #

修改动态生成输入框的逻辑，给所有输入框添加统一类名，然后在表单提交时收集所有输入框的值，拼接成逗号分隔的字符串后提交。

1.1 修改动态生成输入框的函数

function handleChildrenNoChange() {
    const childrenNo = document.getElementById('childrenNo').value;
    const childAgeFieldsContainer = document.getElementById('childAgeFields');

    // 清空现有输入框
    childAgeFieldsContainer.innerHTML = '';

    // 添加标签
    const label = document.createElement('label');
    label.innerText = '儿童年龄：';
    childAgeFieldsContainer.appendChild(label);

    // 生成对应数量的输入框
    for (let i = 1; i <= childrenNo; i++) {
        const ageField = document.createElement('input');
        ageField.type = 'number';
        ageField.placeholder = `第${i}个儿童年龄`;
        ageField.className = 'child-age-input'; // 统一类名，方便批量选择
        ageField.required = true;

        childAgeFieldsContainer.appendChild(ageField);
    }
}

1.2 添加表单提交事件处理

// 替换为你的表单ID
document.getElementById('booking-form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交，改为手动处理

    // 收集所有儿童年龄输入框的值，过滤空值
    const childAgeInputs = document.querySelectorAll('.child-age-input');
    const childAges = Array.from(childAgeInputs)
        .map(input => input.value.trim())
        .filter(val => val !== '');

    // 创建包含表单所有数据的FormData对象
    const formData = new FormData(this);
    // 更新chd_age字段为逗号分隔的字符串
    formData.set('chd_age', childAges.join(','));

    // 提交数据到后端（示例使用fetch，可替换为XMLHttpRequest）
    fetch('/your-submit-endpoint', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('提交成功:', data);
        // 提交成功后的操作，如页面跳转
    })
    .catch(err => console.error('提交失败:', err));
});

方案2：使用隐藏字段适配传统表单提交 #

如果需要保留传统表单提交方式（不使用AJAX），可以添加一个隐藏字段，在提交前将拼接好的年龄字符串赋值给它。

2.1 在表单中添加隐藏字段

<form id="booking-form">
    <!-- 其他表单字段 -->
    <input type="hidden" name="chd_age" id="hidden-chd-age">
    <button type="submit">提交</button>
</form>

2.2 修改提交事件处理

document.getElementById('booking-form').addEventListener('submit', function() {
    const childAgeInputs = document.querySelectorAll('.child-age-input');
    const childAges = Array.from(childAgeInputs)
        .map(input => input.value.trim())
        .filter(val => val !== '');
    
    // 将拼接后的字符串赋值给隐藏字段
    document.getElementById('hidden-chd-age').value = childAges.join(',');
    // 不阻止默认提交，表单会携带隐藏字段的值正常提交
});

验证结果 #

修复后提交表单，后端收到的JSON数据中chd_age字段会变成逗号分隔的字符串，示例如下：

{"client_name_last":"Teszt","client_name_first":"Elek","client_mail":"info@kontrast.com","client_telephone":"6200532947","check_in":"2024-05-01","check_out":"2024-05-02","username":"Pannon","password":"wwere4436jv9RFMPs5vkztx","property_id":"701043","client_lang":"","adults_no":"2","chd_no":"2","chd_age":"13,21","client_comment":""}

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