动态新增文本框数据无法存入MongoDB，求多字段适配解决方案

问题根源 #

1. 前端问题：
   • 新增的文本框不在提交表单范围内，提交时无法携带其数据
   • 新增文本框的name属性固定为content2，多次新增会覆盖值，无法传递多个内容
2. 后端问题：
   • MongoDB Schema定义为固定字段，无法存储多个动态新增内容
   • 接口仅处理固定的content2字段，无法接收数组形式的动态数据

修复步骤 #

前端修复

• 将新增按钮移到提交表单内部，确保新增文本框被添加到该表单中
• 动态文本框的name使用数组格式contents[]，让表单提交时自动将多个值打包为数组
• 新增专用容器存放动态文本框，避免干扰原有输入框结构

后端修复

• 修改MongoDB Schema，将存储动态内容的字段改为数组类型[String]
• 在POST接口中接收req.body.contents数组，并存储到对应字段

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
    .democlass {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
</style>
<body>
    <h1>Posting data to mongo</h1>
    <form class="container" method="post" action="/">
        <div class="form-group">
            <input class="form-control" name="title" placeholder="标题">
        </div>
        <div class="form-group">
            <input class="form-control" name="content" placeholder="初始内容">
        </div>
        <!-- 动态内容容器 -->
        <div id="dynamic-contents" class="form-group"></div>
        <button type="button" onclick="addInput()">新增文本框</button>
        <button type="submit">存入MongoDB</button>
    </form>

    <script>
        function addInput() {
            var x = document.createElement("input");
            x.setAttribute("type", "text");
            x.setAttribute("name", "contents[]"); // 数组格式name，支持多值提交
            x.setAttribute("class", "democlass");
            x.setAttribute("placeholder", "新增内容");
            document.getElementById("dynamic-contents").appendChild(x);
        }
    </script>
</body>
</html>

Node.js代码

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({ extended: true }))

const url = "your mongodb's url"; // 替换为你的MongoDB连接地址

mongoose.connect(url, { useNewUrlParser: true, useUnifiedTopology: true })
    .then((result) => console.log("连接成功"))
    .catch((err) => console.log(err))

// 修改Schema，支持存储多个动态内容
const notesSchema = {
    title: String,
    content: String,
    contents: [String] // 数组类型存储动态新增内容
}

const Note = mongoose.model("Note", notesSchema);

app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
})

app.post("/", function(req, res) {
    let newNote = new Note({
        title: req.body.title,
        content: req.body.content,
        contents: req.body.contents || [] // 接收数组，若无则设为空数组
    });
    newNote.save()
        .then(() => console.log("数据保存成功"))
        .catch(err => console.log(err));
    res.redirect('/');
})

app.listen(5500, function(){
    console.log("server is running on 5500");
})

说明 #

• 前端通过name="contents[]"让表单自动将所有新增文本框的值打包为数组，后端req.body.contents可直接获取所有新增内容
• MongoDB Schema使用数组类型[String]，支持存储任意数量的动态内容
• 所有输入框和操作按钮都在提交表单内部，确保提交时能包含所有输入数据

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