Logging upon receiving POST request in Express

Question

I have recently started picking up Node.js with the Express framework. I created a simple server and attached an HTML file with a form consisted of a single button of type submit which was supposed to send a post request to the server. It doesn't give me any errors but when I try to log a message to the console upon pressing the submit button, nothing happens. I am pretty sure it has something to do with the HTML form syntax but I can never be too sure. Here is the HTML:

<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>Test</title>
 </head>
<body>
  <form class="test" action="http://localhost:8000/example" method="post">
    <input type="submit" name="but" value="Press me">
  </form>
</body>
</html>

Here is the Express code:

const http = require("http");
const app = require("express")();
const path = require('path');
const bodyParser = require("body-parser");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 

app.use("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});

app.post("/example", (req, res) => {
console.log("pressed");
});

app.listen(8000, ()=>{
console.log("Running at 8000");
});

Use, `app.use(__dirname + "/")` if you want that to be your public display folder — Ameer, Apr 08 '20 at 16:28

score 1 · Answer 1 · answered Apr 08 '20 at 16:26

1

Change this...

app.use("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});

to this...

app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});

answered Apr 08 '20 at 16:26

Andrew

21
1

Can I somehow make it not transfer me to another page f. e. the /example, its only there because I thought it would fix the issue but it didn't, I'd like to keep the current page. And also how did that solve my problem? – Пламен Цанев Apr 08 '20 at 16:35

score 1 · Accepted Answer · answered Apr 08 '20 at 16:39

It's occurs because app.use () is treated as middleware for your application. To work properly you should use app.get (). Here is more detailed explanation. Other alternative is provide your html as an static content, you can see more about here.

To work properly you should change your code to this:

app.get("/", (req, res) => {
  res.sendFile(__ dirname + "/index.html");
});

You can also modify your HTML to this:

<form class="test" action="/example" method="post">

Because is in the same host. You just use complete url when performing action to other host.

Logging upon receiving POST request in Express

2 Answers2