Node/Express: How to use more than one POST request in same route-CodePudding

I currently have two buttons within my EJS template that have POST request methods and i cant get them both to work as i have only up until now used one POST request per route.

I have two sets of to do lists, one under the home route "/" which is identified by its key pair value list: day, and the other identified as list: "Work".

Within each list i have a post request that adds a new item and the second POST request will essentially redirect to the other to do list. These are both generated from submit buttons.

I am trying to solve this by creating a 3rd route assigned to the redirect button that redirects either to the home or work list depending on the current titleList value.

However i can redirect from the home list to the work list but once there i can not redirect back to the home page!.

console shows a 302 status code the moment i click the button to redirect me a second time.

I do not think at this point the get request is possible as it would be redirecting to nothing but i do not know how to proceed further.

I am a freshman on node and Express!

My codes below,

HTML

<%- include("header") -%>    
<div  id="heading">
<h1><%=listTitle%></h1>
</div>

<div >
<% for (let i =0; i< newListItems.length; i  ) { %>
<div >
<input type="checkbox">
<p><%= newListItems[i] %></p>
</div>
<% }; %>

<form  action="/" method="post">
<input type="text" name="newItem" placeholder="New item?" autocomplete="off">
<button type="submit" name="list" value=<%= listTitle %>> </button>
</form>

</div>

<form  action="/divert" method="post">
<button type="submit"  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")
});

CodePudding user response：

can't put two posts in one route

CodePudding user response：

I have solved this, after posting the problem on here it got me thinking harder.

I inserted a EJS marker into the redirect buttons like below:

<form  action=<%= resType %> method="post">

resType was added on server side as a new key value pair to render in both app.get routes like below:

res.render("list", {listTitle: "Work list", newListItems: workItems, btnName: btnIdentify, resType: "/work" });

and

res.render('list', {listTitle: day, newListItems: items, btnName: btnIdentify, resType: "/divert"});

So every time the redirect button was clicked it would send a POST request to the route depending on the value of resType.

All I needed to do then was write up two app.posts to receive these post requests like below:

app.post("/work", function(req,res) {

    res.redirect("/");
    btnIdentify = "Work";

})

app.post("/divert", function(request,responce) {
  if (request.body.list !== "Work") {
    responce.redirect("/work");
    btnIdentify = "Home";
  }
})