如何将表单动态字段的全部元素内容添加到mailto生成的邮件中

你的代码存在以下几个核心错误导致无法正常收集字段内容：

• 内容收集时机错误：在创建输入框时就拼接内容，此时用户还未输入任何信息，只能拿到空值
• 属性使用错误：<input> 是单标签元素，用户输入的内容存储在 value 属性中，而非 innerHTML
• 元素追加逻辑错误：使用 container.innerHTML += "<br>" 会重绘整个容器内的所有已有元素，已经输入的字段内容会被直接清空
• 未动态读取最新输入：没有在发送邮件时统一拉取所有字段的当前值

你只需要调整字段创建逻辑，并且在发送邮件时遍历所有动态生成的输入框收集内容即可，以下是可直接运行的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>邮件生成器</title>
</head>
<body>
    <form name="formulaire" action="" method="post" enctype="text/plain">
        <div id="container">
            <button type="button" onclick="ajouterInput_text()">添加文本字段</button>
            <br />
        </div>
        <br />
        <button
            type="button"
            class="btn btn-outline-success"
            onclick="envoyer()"
        >
            生成邮件
        </button>
    </form>

    <script>
        var id = 0;
        // 新增字段逻辑优化
        function ajouterInput_text() {
            id++;
            var container = document.getElementById("container");
            var input = document.createElement("input");
            input.type = "text";
            input.id = "field-" + id;
            input.name = "champenplus";
            input.placeholder = "字段" + id;
            container.appendChild(input);
            // 用创建元素的方式追加换行，避免重绘已有元素
            var br = document.createElement("br");
            container.appendChild(br);
        }

        // 发送邮件逻辑重写
        function envoyer() {
            // 先收集所有动态生成的输入框内容
            var fieldList = document.getElementsByName("champenplus");
            var bodyContent = "您好%0D%0D";
            for(var i=0; i<fieldList.length; i++){
                var val = fieldList[i].value.trim();
                if(val){
                    // 对内容做URI编码，避免特殊字符导致乱码
                    bodyContent += encodeURIComponent(val) + "%0D%0A";
                }
            }
            // 唤起mailto协议
            window.location.href = "mailto:ADRESSEMAIL@MAIL.FR?subject=新增字段内容&body=" + bodyContent;
        }
    </script>
</body>
</html>

• 把按钮类型改为type="button"，避免触发表单默认提交刷新页面
• 新增字段时使用createElement创建换行元素，不会清空之前已输入的内容
• 发送邮件时遍历所有字段读取当前输入值，无论新增多少个字段都能正常收集
• 对内容做URI编码，兼容中文、特殊符号等输入场景，避免生成的邮件内容乱码

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