Post data on another page in nodejs

Question

I'm new in nodejs. I'm trying to make login form using ejs engine. What I want is simply print the username and password in the welcome screen using post request. The problem is that if I am using POST action it will print my data but don't display the welcome screen layout and if I used GET action then it will display the screen layout but don't have the data. I have wrriten the code in the app.js file. Is it correct?? I've mentioned my app.js code below for reference. Thanks in advance.

Code:-

app.post('/welcome', function(req, res) {
     res.send('Username is '+req.body.unm+'<br>Password is '+req.body.pwd);
});

Answer 1

What issue are your facing? Is the return string not displaying the values? When using template engines you should use generally use render instead of res.send to send the view.

Check the sample s given in ejs home page.

Answer 2

There's some really useful information on the ejs npm page: https://www.npmjs.com/package/ejs

I suggest you look into the express package, which allows you to serve pages, so you would start with something like this:

app.get('/', function(req, res){
  return res.sendFile(__dirname + '/index.html');
});

Here's a useful answer which will help you out: how to implement login auth in node.js

Answer 3

If you are using express with ejs, you need to define the folder that houses your views (.ejs files) like this:

var express = require('express')
app.use(express.static(__dirname + '/views')); // set the static files location for the static html

And instead of res.send, respond with this:

app.post('/welcome', function(req, res) {
        res.render('welcome', {username: req.body.unm, password: req.body.pwd});
});

Construct your html in welcome.ejs and put place holders for <%= username %> and <%= password %>

Sample welcome.ejs file in views directory in project base:

<div class="container">
    <p>Welcome<b><%= username %></b></p>
    <p>Your password is <%= password %> </p>
</div>

Answer 4

Try this..

This is your index.html file where in you can fill the username and password. I am calling the display post action to show your username and password on submit.

home.html

<form action="/display" method="POST">
    <input type="text" placeholder="name" name="name">
    <input type="text" placeholder="password" name="pwd">
    <button type="submit">Submit</button>
</form>

This is your nodejs code which displays the user name and password using post request. The express will serve your html page through get request and the post request will be triggered on submitting the data.

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.use(bodyParser.urlencoded({
  extended: true
}))

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/home.html')
});
app.post('/display', (req, res) => {
  res.send('Username is ' + req.body.name + '<br>Password is ' + req.body.pwd);
  console.log(req.body)
});

app.listen(3000, () => {
  console.log('listening on 3000')
})