Form POST Requests Body is Empty - Node.js / express / ejs / body-parser

Question

I'm having trouble with my post from a registration form in node.js. Every time the form is posted the body the request has information but the body is empty. I'm new to node and express so it's probably something small but I can't for the life of me figure it out.

Here is my form in ejs:

<form class="form-signin" method="post" action="/users/register">
  <div class="form-group">
    <label class="sr-only" for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
  </div>
  <div class="form-group">
    <label class="sr-only" for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Enter Password">
  </div>
  <div class="form-group">
    <label class="sr-only" for="confirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
  </div>
  <button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>

Here is my router code within the users router:

router.post('/register', function(request, response, next) {
  console.log(request);
  console.log(request.body)
  response.render('register', { 'title': 'Register' });
});

Here is relevant output on the console:

console.log(request); output shortened this is just the tail.      
  _startAt: [ 299545, 483820242 ],
  _startTime: 2018-09-20T16:08:59.366Z,
  _remoteAddress: '::1',
  body: {},
  _body: true,
  length: undefined,
  read: [Function],
  secret: undefined,
  cookies: {},
  signedCookies: {},
  route:
   Route {
     path: '/register',
     stack: [ [Object] ],
     methods: { post: true } } }
{}
POST /users/register 200 21.906 ms - 2361

app.js code:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

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

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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

app.use('/', indexRouter);
app.use('/users', usersRouter);

app.use(function(request, response, next) {
  next(createError(404));
});

app.use(function(error, request, response, next) {
  response.locals.message = error.message;
  response.locals.error = request.app.get('env') === 'development' ? error : {};
  response.status(error.status || 500);
  response.render('error');
});

module.exports = app;

Things I've tried:

• different browsers
• different routes
• writing simpler forms from scratch
• formidable instead of body-parser

I'm pretty sure at this point that it's a problem with the ejs form because the body object in the request is always empty.

Skiba

Can you please post your app.js code as well? – Bloodroot

Answer 1

The <input> elements in the form must have a name attribute defined, not just id.

Kaete

Thanks! Added name attributes and everything seems to be working. – Skiba

Answer 2

Another common error when using express, make sure you use body-parser https://www.npmjs.com/package/body-parser i.e

    const router = express();
    const bodyParser = require('body-parser');

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

Chetnik

Should not be required as a separate import as of v4.16 – Mcgowen

Just to Note that body-parser has been deprecated as of Express 4.16+ – Chetnik

Answer 3

The other answer pointed out what you're missing and I updated your .ejs code to show you correct way of posting a html form:

<form class="form-signin" method="post" action="/users/register">
  <div class="form-group">
    <label class="sr-only" for="email">Email address</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
  </div>
  <div class="form-group">
    <label class="sr-only" for="password">Password</label>
    <input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
  </div>
  <div class="form-group">
    <label class="sr-only" for="confirmPassword">Confirm Password</label>
    <input type="password" name="confirmPassword" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
  </div>
  <button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>

You can either do the above or handle the submission with javascript/jquery if you're submitting a more complex form or need some sort of validation on fields.

See this answer: Submit a form using jQuery

Alboin