I'm new to backend javascript and I have a form that on submit is supposed to show the submitted object, but it's displaying an empty object instead. I've included body-parser so I'm not sure where the issue is. Here is my app.js file:
const express = require("express");
const app = express();
const mustacheExpress = require("mustache-express");
const bodyParser = require("body-parser");
const pgp = require("pg-promise")();
app.engine("html", mustacheExpress());
app.set("view engine", "html");
app.set("views", __dirname + "/views");
app.use("/", express.static(__dirname + "/public"));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/new_creature',function(req,res){
res.render('new_creature/index');
});
app.post('/new_creature', function(req,res){
res.end(JSON.stringify(req.body));
console.log(req.body);
// res.render('new_creature/index');
});
and here is my views/creatures/new_creature/index.html file:
<form method="POST" action="/new_creature">
Species:<input type="text">
Family:<input type="text">
Habitat:<input type="text">
Diet:<input type="text">
Planet:<input type="text">
<input type="submit" placeholder="submit">
</form>
If you want bodyparser to work you need to have name attributes on your form elements that you want posted. For example:
<form method="POST" action="/new_creature">
Species:<input name='species' type="text">
Family:<input name='family' type="text">
Habitat:<input name='habitat' type="text">
Diet:<input name='diet' type="text">
Planet:<input name='planet' type="text">
<input type="submit" value="submit">
</form>
Also, placeholder doesn't make sense on a submit button; placeholder is the ghost text that's supposed to show in an input that hasnt' been filled.