For some reason, I am encountering an issue where the data retrieved from req.body.newFullName appears to be empty. The post request is being directed to the correct route, but I am struggling to access the form field data sent via the XMLHttpRequest.
Here is a snippet of the code I have been working with:
Setting up the route in app.js
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.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
module.exports = app;
Details of the route in users.js
var express = require('express');
var router = express.Router();
/* GET user list */
router.get('/', function(req, res, next) {
res.send('respond with a resource');
});
/* POST contacts */
router.post("/", function(req,res,next){
data = req.body.newFullName;
res.send(data);
})
module.exports = router;
Form details in index.html
...
<form id="contacts">
<label for="FullName">Full Name:</label>
<input type="text" name="newFullName" placeholder="Enter Full Name..."><br>
<input type="submit" value="Submit data">
</form>
...
Javascript that submits the form data
window.addEventListener("load",function(){
function createContact(){
var XHR = new XMLHttpRequest();
var frmData = new FormData(form);
XHR.open("POST", "http://localhost:3000/users/");
XHR.send(frmData);
};
var form = document.getElementById("contacts");
form.addEventListener("submit", function(event){
event.preventDefault();
createContact();
});
});
Thank you for any assistance you can provide!