Use express js to pass form data to new page

Question

I'm still fairly new to Express.js. I have a question about sending form data to an existing template. I have two routes which have template views associated with them. One page has a form on it and I want to take inputs from that form to populate the other template of the other route. I'm using Hanglebars for my template engine.

I've found a lot of helpful answers here (this one especially Cannot POST form node.js - express ), but none that quite answer my question.

I know how to post to create a new page with the form data. Like this:

router.post('/game', function(req, res) {
  res.send(req.body.username);
});

But how do I get req.body.username accessible to a handlebars template? I've been reading various tutorials and it looks like I need to do something with next() in app.use('/game', game);. But I'm getting lost as to what exactly that is.

Here's a simplified version of my code.

My main server file:

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var http = require('http').Server(app);
var path = require('path');
var io = require('socket.io')(http);
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');

var routes = require('./routes/index');
var game = require('./routes/game');

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/game', game);

// view engine setup
app.set('views', path.join(__dirname, 'views'));

http.listen(3000, function(){
  console.log('listening on *:3000');
});

My route file "index.js":

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', {
      title: 'Pick a Player',
  });
});

module.exports = router;

Here is the form on index.handlebars (just the form):

<form method="post" action="/game" novalidate name="pick-a-player" id="pickAPlayer" class="form-box">
 <p>What is your name?</p>
 <input type="text" name="username" placeholder="name">
 <p>Please select a player</p>
 <label>
     <input type="radio" name="player" value="Jane" checked> Jane<br>
     <input type="radio" name="player" value="Sue"> Sue<br>
     <input type="radio" name="player" value="Anne"> Anne<br>
 </label>
 <input type="submit" value="Start the game" id="submitCharacterForm">
</form>

I know I need to use post to get the data through req.body. But I'm getting the template through .get(). How do get the two to communicate?

Here's the route for game.js

var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
var router = express.Router();

/* GET Game page. */
router.get('/', function(req, res) {
  res.render('game', {
      title: 'Let's Play',
      username: req.body.username,
      player: req.body.player
  });
});

module.exports = router;

When the value of player gets called on game.handlebars, it looks like this:

<p class="player-card">{{player}}</p>

Answer 1

If I'm understanding this correctly, the main form will have two values on the request body: username and player.

This form will make a POST request to /game according to your form block:

<form method="post" action="/game" ...>

You handle this POST request with the following route handler:

router.post('/game', function(req, res) {
  res.send(req.body.username);
});

And you want to send the username and player values to your game template correct?

If I'm understanding this correctly, you can either res.redirect with data or simply render a different view with the data:

router.post('/game', (req, res) => {
  const { username, player } = req.body
  res.render('play-game', { username, player });
});