Why is my EJS variable returning “undefined” when i'm trying to use the mongoose “findByIdAndRemove” method

Question

I'm trying to delete records from a mongoDB database on the event of the click of a button. But when I console log the value of this button it is returning "undefined"

Below is the ejs file

<%- include("partials/header") -%>

<h1>Home</h1>

<!-- A variable for the homepage that is populated by a body of text passed from app.js -->
<p><%= homeText %> </p>

<a class= "btn btn-primary" href="/compose" role="button">Compose a new post</a>

<%# A forEach method with a function holding a parameter of "post" which represents an element in an array, then displaying the element's title and content. %>
<% homeContent.forEach(function(post){ %>
<h1><%= post.title %></h1>
<!-- Displays only the first 100 characters of a post as well as a "read more" hyperlink which directs to a "post" page containing the full content of the post. -->
<p><%= post.content.substring(0, 100) + " ... " %> <a href="/post/<%=post._id %>">Read more</a></p>

<form action = "/delete", method="Post">
  <button type="button" class ="btn btn-link" name = "deleteButton" value = "<%=post._id%>" onClick="this.form.submit()"  ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
  <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg> </button>   %>

  </form>


<%});%>



<%- include("partials/footer") -%>

And here is the method i'm trying to call for my delete function within my app.js (server file)

app.post("/delete", function(req,res){
  const selectedId = req.body.deleteButton;

  Post.findByIdAndRemove(selectedId, function(err){
    if(!err){
      console.log(selectedId);
      res.redirect("/");
    }
  })
});

When I console log the ID variable it's clear that it's not correctly accessing the ID of the post from the EJS file as it returns "undefined", so nothing is getting deleted. Is there anything obvious i'm missing here? I'm quite new to MongoDB and NodeJS, I have searched around for some answers but can't seem to identify what is syntactically wrong with what I have written. Feel free to let me know if you need any more of my code etc, thank you in advance!

Answer 1

When you submit a form, only successful controls will be included in the submitted data.

For a <button> to be a successful control it must be the submit button used to submit the form .

Your button isn't a submit button (you said type="button" ) and it isn't (directly) used to submit the form (you are using JavaScript).

As a result, your form has no successful controls in it so there is no form data included in the POST request.

---

• Remove the onclick attribute that submits the form with JavaScript
• Remove the type attribute that stops the button being a submit button