mailto提交表单时动态新增datalist输入框内容未显示如何修复

问题根因 #

• 新增输入框提交无值：动态生成的<input>元素没有添加name属性，浏览器提交表单时只会携带带有name属性的表单控件内容。同时如果需要提交多组同类型字段，需要将name设为数组格式（如Product[]、op[]），避免前值被后值覆盖。
• 缺少对应标签：现有逻辑仅创建了输入框元素，没有同步生成<label>标签并插入到对应输入框前。

修复代码 #

只需要替换原有addInput函数即可，完整修改后的逻辑如下：

// 全局计数器，用于区分多组新增的字段id，避免重复
let inputCount = 1;
function addInput() {
    const container = document.getElementById("container");
    // 新增Product对应的label和input
    const productLabel = document.createElement("label");
    const productId = `browser_${inputCount}`;
    productLabel.setAttribute("for", productId);
    productLabel.innerText = "Product:";
    const productInput = document.createElement("input");
    productInput.setAttribute("list", "browsers");
    productInput.setAttribute("name", "Product[]");
    productInput.setAttribute("id", productId);
    // 新增OP对应的label和input
    const opLabel = document.createElement("label");
    const opId = `op_${inputCount}`;
    opLabel.setAttribute("for", opId);
    opLabel.innerText = "OP:";
    const opInput = document.createElement("input");
    opInput.setAttribute("list", "op");
    opInput.setAttribute("name", "op[]");
    opInput.setAttribute("id", opId);
    // 换行符，保持和原有字段一致的排版
    const br = document.createElement("br");
    // 按顺序插入到容器中
    container.appendChild(productLabel);
    container.appendChild(productInput);
    container.appendChild(opLabel);
    container.appendChild(opInput);
    container.appendChild(br);
    // 计数器自增，保证下一组新增的id不重复
    inputCount++;
}

改动说明 #

1. 新增全局计数器inputCount，为每一组新增的输入框生成唯一id，保证label的for属性可以正确关联到对应输入框，点击标签即可聚焦输入框。
2. 动态生成Product和OP对应的label元素，和输入框成对插入到容器中，排版和原有字段保持一致。
3. 给新增的输入框添加了数组格式的name属性，提交表单时多组值会按顺序上报，不会出现覆盖问题，mailto提交的邮件内容中也会正常显示所有新增字段的值。

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