表单提交无法获取Air vs Air Mods模块的最新输入数据

核心问题 #

1. 渲染目标错误：checkForAirVsAirMods函数中，populateDetails的目标容器写为#airVsAirMods（fieldset元素），但实际收集数据的collectData是从#airVsAirModsDetails这个div中获取输入值，导致输入框位置错误，无法正确匹配收集逻辑。
2. 重复渲染覆盖输入：每次切换攻击/防御部队为飞机时，都会重新请求JSON并生成新的输入框，直接覆盖用户之前修改的内容，导致提交时只能拿到最后一次渲染的默认值。

修复代码 #

1. 修正checkForAirVsAirMods函数

function checkForAirVsAirMods() {
    const airVsAirFieldset = $("#airVsAirMods");
    const airVsAirDetails = $('#airVsAirModsDetails');
    
    if ($("#attackingForce").val() === "aircraft" && $("#defendingForce").val() === "aircraft") {
        airVsAirFieldset.show();
        // 仅当详情容器为空时，才加载默认数据并渲染输入框
        if (airVsAirDetails.children().length === 0) {
            $.getJSON("/static/air_vs_air_mods.json", function (data) {
                if (data && data.length > 0) {
                    // 修正渲染目标为airVsAirModsDetails
                    populateDetails(data[0], '#airVsAirModsDetails');
                }
            });
        }
    } else {
        airVsAirFieldset.hide();
        // 切换非飞机部队时清空内容，下次切回时重新加载默认值（可选，按需调整）
        airVsAirDetails.empty();
    }
}

2. 可选：增强populateDetails保留用户输入

如果需要在某些场景下重新渲染但不丢失用户输入，可修改populateDetails函数：

function populateDetails(data, target) {
    let html = '';
    for (let key in data) {
        if (data.hasOwnProperty(key) && key !== 'nomenclature') {
            // 优先使用已存在的输入值，无值则用默认数据
            const existingValue = $(`${target} input[name="${key}"]`).val() || data[key];
            html += `<label>${key}: <input type="text" name="${key}" value="${existingValue}" /></label><br>`;
        }
    }
    $(target).html(html).show();
}

修复说明 #

• 修正渲染目标后，输入框会正确生成到#airVsAirModsDetails中，确保collectData能准确获取用户输入。
• 新增判断逻辑，仅首次显示Air vs Air模块时加载默认数据，后续切换时不再重复渲染，避免覆盖用户修改。
• 可选的增强版本支持在需要重新渲染的场景下保留已有输入，适配更多业务需求。

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