javascript - Add Update Functionality

Question

Sorry if this is super obvious, but I'm new to coding. I'm using node.js, express, mongoose and mongodb to try and add an update function to my app to make it CRUD by adding an edit button. Whenever I click the edit button though it still just deletes the item as if I were clicking the checkbox. I'm thinking it's because I'm calling the item from the same form of "pending items" but it seems like my update code isn't even registering as my console.logs for //Edit items aren't logging.

I want it to identify the item by its id when its edit button is submitted (then put the item in the newTask input to be edited and resubmitted as an update but I haven't figured out how to link those 2). I know the code is wonky, I'm just trying to figure out how to put this together, so thanks for any help!

    <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>

''//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);
      }
    });
  }
});

question from:https://stackoverflow.com/questions/65831192/add-update-functionality

Answer 1

You have app.put("/update", function(req, res) in Express but <form action="/update" method="post"> in your form, which matches your delete route.

For your second question, there are many ways to populate your item form in Javascript, but there might be an even more efficient way if you tell us if you're using a framework.