如何让JavaScript表单代码支持多ID获取数据生成邮件？

问题出在document.querySelectorAll("#dead1, #dead2").value这行——querySelectorAll返回的是NodeList元素集合，不是单个输入框，集合本身没有value属性，自然会得到undefined。

要收集多个输入框的内容，得遍历每个元素，把它们的value拼接成邮件正文，具体修改如下：

修正后的JavaScript代码 #

function sendMail() {
    // 列出所有需要收集数据的输入框ID
    const targetInputIds = ['dead1', 'dead2', 'dead3', 'dead4', 'dead5', 'dead6'];
    let emailBody = '';

    // 遍历每个输入框，收集内容并格式化
    targetInputIds.forEach(id => {
        const inputElement = document.getElementById(id);
        // 确保元素存在且内容不为空
        if (inputElement && inputElement.value.trim()) {
            // 获取对应标签的文本，让邮件正文更清晰
            const labelElement = document.querySelector(`label[for="${id}"]`);
            const fieldTitle = labelElement ? labelElement.textContent.trim() : `未命名字段`;
            // 拼接成「字段名: 内容」的格式，换行分隔
            emailBody += `${fieldTitle}: ${inputElement.value.trim()}\n\n`;
        }
    });

    // 构造mailto链接
    const mailtoLink = `mailto:example@gmail.com` +
        `?cc=mycc@gmail.com` +
        `&subject=${encodeURIComponent("Ficha")}` +
        `&body=${encodeURIComponent(emailBody)}`;

    window.location.href = mailtoLink;
}

关键说明 #

1. 用getElementById逐个获取输入框比querySelectorAll遍历更直接，也能避免集合操作的问题
2. 加入了标签文本的获取，让邮件正文的内容对应清晰，不会只是一堆零散的文字
3. 增加了空值判断，避免把空的输入内容也加到邮件里

表单使用注意 #

确保所有需要收集的输入框都有对应的id，并且和targetInputIds数组里的ID一致，比如你提供的dead4输入框，只要ID在数组里，就能被自动收集。

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