My current challenge involves implementing two POST request methods for buttons in an EJS template. So far, I have only used one POST request per route and now struggle to get both buttons to function correctly.
I have two different sets of to-do lists: one under the home route "/" identified by the key pair value list: day, and the other identified as list: "Work".
Each list has a post request that adds a new item, and the second POST request redirects to the other to-do list. These actions are triggered by submit buttons.
To address this issue, I created a third route assigned to the redirect button. This route should redirect either to the home or work list based on the current titleList value.
However, I can easily redirect from the home list to the work list, but I face trouble directing back to the home page once at the work list!
When I attempt the second redirection, the console logs a 302 status code immediately upon clicking the button.
At this stage, I believe a get request is not feasible as it would direct to nothing, leaving me unsure how to proceed further.
Being new to Node.js and Express, I seek guidance in resolving this issue.
Check out my code below:
HTML
<%- include("header") -%>
<div class="box" id="heading">
<h1><%=listTitle%></h1>
</div>
<div class="box">
<% for (let 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 item?" autocomplete="off">
<button type="submit" name="list" value=<%= listTitle %>>+</button>
</form>
</div>
<form class="" action="/divert" method="post">
<button type="submit" class="btn1" name="redirect" value="identify" style="width:
100px"><%=btnName%></button>
</form>
<%- include("footer") -%>
app.js
//jshint esversion:6
const express = require("express");
const bodyParser = require("body-parser");
// globals.
let items = [];
let workItems = [];
let btnIdentify = "Work";
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
//Send static css file to browser.
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.get("/", function(req, res) {
const date = new Date();
const options = {
weekday: "long",
day: "numeric",
month: "long"
};
let day = date.toLocaleDateString("en-US", options);
res.render('list', {listTitle: day, newListItems: items, btnName: btnIdentify});
});
app.post("/", function(req, res) {
let item = req.body.newItem;
if (req.body.list === "Work") { //only uses frist word off the listTitle value.
workItems.push(item);
res.redirect("/work");
} else {
items.push(item);
res.redirect("/");
}
console.log(req.body);
})
app.get("/work", function(req,res) {
res.render("list", {listTitle: "Work list", newListItems: workItems, btnName: btnIdentify });
});
app.post("/divert", function(req,res) {
if (req.body.list !== "Work") {
res.redirect("/work");
btnIdentify = "Work";
} else if (req.body.list === "Work") {
res.redirect("/");
btnIdentify = "Home";
}
})
app.listen(3000, function() {
console.log("Server is running on port 3000")
});