TLDR: I'm trying to get the name value of a button using express (ex body parser module) but idk why the code returns an empty string in the name property of my button.
Long explanation: Im generating 2 different lists for a todo list app, so I'm trying to use the listTitle ejs value to send the new tasks to the correct list, as the value returns an empty string they are all posted on the same list. What confuses me the most is that in the h1 of the page the ejs tag works perfectly.
Here's my server code:
const express = require("express");
const date = require(__dirname + "/date.js");
const app = express();
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.use(express.static("public"));
let items = [];
let workItems = [];
app.get("/", function (req, res) {
let day = date.getDate();
res.render("list", {
listTitle: day,
newListItems: items,
});
});
app.get("/work", function (req, res) {
res.render("list", { listTitle: "Work", newListItems: workItems });
});
app.post("/", function (req, res) {
var item = req.body.newItem;
console.log(req.body);
if (req.body.list === "Work") {
workItems.push(item);
res.redirect("/work");
} else {
items.push(item);
res.redirect("/");
}
});
app.get("/about", function (req, res) {
res.render("about");
});
app.listen("3000", function () {
console.log("Server started on port 3000");
});
And here is my frontend:
<%- include('header'); -%>
<div class="box" id="heading">
<h1><%= listTitle %></h1>
</div>
<div class="box">
<% for ( var i=0; i<newListItems.length; i++) { %>
<div class="item">
<input type="checkbox">
<p><%= newListItems[i] %></p>
</div>
<% } %>
<form class="item" action="/" method="POST">
<input type="text" name="newItem" placeholder="New task" autocomplete="off" />
<button type="submit" name="name" value="<% listTitle %>">+</button>
</form>
</div>
</body>
<%- include('footer'); -%>
Im also including my other js module to import the date just in case this is the problem.
exports.getDate = function () {
const today = new Date();
const options = {
weekday: "long",
day: "numeric",
month: "long",
};
return today.toLocaleDateString("en-US", options);
};
exports.getDay = function () {
const today = new Date();
const options = {
weekday: "long",
};
return today.toLocaleDateString("en-US", options);
};