动态创建input提交后写入.csv显示undefined问题排查及解决

我找到问题根源了——之前把动态创建的输入元素追加到了document.body上，而不是表单内部。正确的处理步骤如下：

1. 先获取目标表单元素：

var form = document.getElementById("listItems");

2. 修改元素追加的目标：
   • 将document.body.appendChild(itemName);改为form.appendChild(itemName);
   • 将document.body.appendChild(itemQuantity);改为form.appendChild(itemQuantity);

对应的后端关联表单代码：

<form action="/buy" method="post" id="listItems">
  <input type="submit" value="Send"> 
</form>

我通过JS动态创建文本框，提交后将内容保存到receipt.csv文件，但打开文件后所有值都显示为undefined。无论在文本框中输入什么内容，后端获取到的输入值始终是undefined。

动态创建文本框的代码：

<script>
  function addItems(){
    var itemName = document.createElement("input");
    itemName.setAttribute('type', 'text');
    itemName.placeholder = "itemName";
    document.body.appendChild(itemName);

    var itemQuantity = document.createElement("input");
    itemQuantity.setAttribute('type', 'text');
    itemQuantity.placeholder = "itemQuantity";
    document.body.appendChild(itemQuantity);
  }
</script>

itemName和itemQuantity对应的后端值在控制台输出和文件中均为undefined。

后端处理提交内容的代码：

var itemN = req.body.itemName;
var itemQ = req.body.itemQuantity;
await fs.appendFile('receipt.csv', "\n" + itemN + " " + itemQ, err => {
    if (err) {
        console.error(err);
    }
    console.log(itemN, itemQ);
    // done!
})

预期效果是将itemN与itemQ以字符串形式追加到receipt.csv中，但实际文件内显示的提交内容为：Undefined Undefined。

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