Javascript 添加更新功能

对不起，如果这是非常明显的，但我是新的编码。我正在使用node.js、express、mongoose和mongodb尝试向我的应用程序添加一个更新功能，通过添加一个编辑按钮使其成为CRUD。每当我单击“编辑”按钮时，它仍然会删除该项，就像我单击复选框一样。我认为这是因为我从相同形式的“待定项”调用该项，但似乎我的更新代码甚至没有注册为我的控制台。//编辑项的日志没有记录

我想让它在提交编辑按钮时通过id识别该项目（然后将该项目放入newTask输入中进行编辑并作为更新重新提交，但我还没有弄清楚如何链接这2个）。我知道代码是不可靠的，我只是想弄清楚如何把它组合在一起，所以谢谢你的帮助

    <div class="box">
      <!-- Item add function -->
      <%  newListItems.forEach(function(item){ %>

      <!-- Form for pending items -->
      <form action="/update" method="post">
        <!-- Items -->
        <div class="item">
          <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
          <button type="submit" class="editItmbtn" name="editItembtn">E</button>
          <p><%=item.name%></p>
        </div>
        <input type="hidden" name="listName" value="<%= listTitle %>"></input>
      </form>
      <%  }) %>
      <!-- End pending items -->

      <!-- Form to add items -->
      <form class="item" action="/" method="post">
        <input type="text" name="newTask" id="id" placeholder="Add new task..." autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
    </div>

---

您的表单始终使用“POST”方法提交http请求，但在您的代码中，app.POST（“更新”）会删除项目

您在Express中有

app.put（“/update”，function（req，res）

，但在您的表单中有

，这与您的删除路径相匹配

---

对于你的第二个问题，有很多方法可以用Javascript填充你的项目表单，但是如果你告诉我们你是否在使用框架，可能会有更有效的方法。

在你的表单中，你使用的是

method=“post”

，这意味着请求将提交到你的

app.post（“/update”…）

，这就是为什么您总是在那里登陆，在那里删除您的项目

你必须做两件事：

将

app.put（'/update'…）

更改为

app.post（'/update'…）

更改

app.post（'/update'…

），这意味着将项目删除为语义上更相关的内容，例如

app.post（'/delete'…

），并分别更改用于删除方法的前端

---

啊-好的，我来看看是给它一个值“put”还是添加/endpoint？_method=put有帮助，但我使用的是：'//Requirements const express=require（“express”）；const session=require（“express session”）//for sessions const favicon=require（“service favicon”）；for favicon const path=require（“path”）；//对于favicon const bodyParser=require（“body parser”）；const cookieParser=require（“cookie parser”）；//对于会话const mongoose=require（“mongoose”）；const_uouse=require（“lodash”）；const MongoStore=require（“connect mongo”）（会话）；const app=express（）“那是你的后端。你的表单在前端。你在前端使用框架吗？哦，前端的引导程序

''//Requirements 
const express = require("express"); 
const session = require("express-session")//for sessions 
const favicon = require("serve-favicon"); //for favicon 
const path = require("path");// for favicon 
const bodyParser = require("body-parser"); 
const cookieParser = require("cookie-parser"); //for sessions 
const mongoose = require("mongoose"); const _ = require("lodash"); 
const MongoStore = require("connect-mongo")(session); 
const app = express();

// Edit items
app.put("/update", function(req, res) {
  const itemName = req.body.newTask;
  const taskID = req.body.editItmbtn;
  const userInput = req.body.id;

  Item.useFindAndModify(taskID), {
      $set: {"/update": userInput}}, {new: true},
    (err, result) => {
      if (err) {
        console.log("ERROR");
      } else {
        res.redirect("/");
        res.render("list", {
          listTitle: "Tasks",
          newListItems: foundItems
        });
      }
    }
});

// Delete checked items
app.post("/update", function(req, res) {
  const checkedItemId = req.body.checkbox;
  const listName = req.body.listName;

  if (listName === "Tasks") {
    Item.findByIdAndRemove(checkedItemId, function(err) {
      if (!err) {
        console.log("Successfully deleted checked item.");
        res.redirect("/");
      }
    });
  } else {
    List.findOneAndUpdate({
      name: listName
    }, {
      $pull: {
        items: {
          _id: checkedItemId
        }
      }
    }, function(err, foundList) {
      if (!err) {
        res.redirect("/" + listName);
      }
    });
  }
});