req.body always empty when sending form via frontend - node.js

Question

I'm just learning node and JS and therefore I built a very simple express-application with mongodb. The application is supposed to render a handlebars-template with a form to add users to the database.
My Problem is: When I send my form via the browser, req.body is always empty. When I send it via postman it works and the user gets added to my database. Why is that and what is missing for body-parser to parse my html-form.
Here is what I have so far:
app.js
const express = require('express'),
app = express(),
createError = require('http-errors'),
path = require('path'),
logger = require('morgan'),
bodyParser = require('body-parser'),
exphbs = require('express-handlebars');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(logger('dev')); // Log requests to API using morgan
app.set('views', './views');
app.engine('hbs', exphbs({
defaultLayout: 'main',
extname: 'hbs'
}));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', require('./routes/routes'));
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = process.env.NODE_ENV === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
views/adminAdd.hbs
<div class="row">
<form class="col s12" id="reg-form" action="/admin/add" name="add-form" enctype="application/x-www-form-urlencoded" method="post">
<div class="row py-md-2">
<div class="input-field col col-sm-6">
<input id="firstname" type="text" class="validate" required>
<label for="firstname">First Name</label>
</div>
</div>
<div class="row py-md-2">
<div class="input-field col col-sm-6">
<input id="lastname" type="text" class="validate" required>
<label for="lastname">Last Name</label>
</div>
</div>
<div class="row py-md-2">
<div class="input-field col col-sm-6">
<input id="email" type="email" class="validate" required>
<label for="email">Email</label>
</div>
</div>
<div class="row py-md-2">
<div class="input-field col col-sm-6">
<input id="password" type="password" class="validate" minlength="6" required>
<label for="password">Password</label>
</div>
</div>
<div class="row py-md-2">
<div class="input-field col-sm-6">
<button class="btn btn-large btn-register btn-primary" type="submit" name="adduser">Add User</button>
</div>
</div>
</form>
</div>
controllers/adminController
var util = require("util"),
adminUser = require("../models/adminUserModel");
exports.admin = function(req, res) {
res.render('admin', {
showNavBar: true,
showFooter: false,
title: 'Admin'
});
};
exports.adminAddGET = function(req, res) {
res.render('adminAdd', {
showNavBar: true,
showFooter: false,
title: 'Admin Add'
});
};
exports.adminAddPOST = function(req, res) {
console.log("req.body=" + util.inspect(req.body));
if(!req.body.firstname) {
res.json({ success: false, message: 'Please provide firstname.' });
} else if (!req.body.lastname) {
res.json({ success: false, message: 'Please provide lastname.' });
} else if (!req.body.email) {
res.json({ success: false, message: 'Please provide email.' });
} else if (!req.body.password) {
res.json({ success: false, message: 'Please provide password.' });
} else {
console.log("All Fields filled");
var newAdminUser = new adminUser({
firstname: req.body.firstname,
lastname: req.body.lastname,
email: req.body.email,
password: req.body.password
});
console.log("newAdminUserObject=" + util.inspect(newAdminUser));
// Attempt to save the user
newAdminUser.save(function(err) {
if (err) {
console.log("error:" + err);
return res.json({ success: false, message: 'ERROR - Didnt work' });
}
console.log("success");
res.json({ success: true, message: 'User added successfully!' });
});
}
};
routes/routes.js
var express = require('express'),
router = express.Router(),
adminController = require('../controllers/adminController'),
indexController = require('../controllers/indexController');
router.get('/', indexController.index);
router.get('/admin', adminController.admin);
router.get('/admin/add', adminController.adminAddGET);
router.post('/admin/add', adminController.adminAddPOST);
module.exports = router;
When sending the following form via postman...
Postman x-www-form-urlencoded
I see the following output in my terminal and the user is added successfully to my mongodb:
req.body={ firstname: 'dan',
lastname: 'dan',
email: 'dan#dan.de',
password: 'dandan' }
All Fields filled
newAdminUserObject={ role: 'Admin',
_id: 5b106939991dda2404c0dc6a,
firstname: 'dan',
lastname: 'dan',
email: 'dan#dan.de',
password: 'dandan' }
success
When I send the form via the browser, I get the following output:
req.body={ adduser: '' }
and in the browser I see the following:
browser output
From my perspective I'm sending the form with x-www-form-urlencoded in both ways to the same address.

Answer 1

Your form input elements are missing 'name' attributes. The reason you are getting { adduser: '' } is because the only input element in the form that has a name attribute is the button element.
<input id="firstname" name="firstname" type="text" class="validate" required>
<input id="email" name="email" type="email" class="validate" required>
...etc