CODEWITHSUNDEEP
node.jsformsexpressejsbody-parser
Violet Graham
Violet Graham

Reputation: 63

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

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:

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.

Upvotes: 6

Views: 4415

Answers (3)

Mbanda
Mbanda

Reputation: 1018

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
    }));

Upvotes: 2

mxdi9i7
mxdi9i7

Reputation: 697

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

Upvotes: 0

Petr Broz
Petr Broz

Reputation: 9942

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

Upvotes: 7

Related Questions