I am trying to create a simple form handler using express. I tried the code below for my form:
<form class="form" action="/" method="post" name="regForm">
<div class="form-group">
<input type="text" name="username" class="form-control" id="username" placeholder="Username">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
And here is my app.js code:
const port = 3000;
var express = require('express'),
app = express(),
server = require('http').createServer(app);
var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
extended: true;
}));
app.use(bodyParser.json());
app.post('/',function(req,res){
var username = req.body.username;
var html = 'Hello:' + username;
res.send(html);
console.log(html);
});
server.listen(port);
I keep getting the error "CANNOT POST /" after submitting the form. Am I missing something like a module?
5 Answers
This way you should try
const port = 3000;
var express = require('express'),
app = express();
var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.json());
app.get('/', function(req, res){
res.render('form');// if jade
// You should use one of line depending on type of frontend you are with
res.sendFile(__dirname + '/form.html'); //if html file is root directory
res.sendFile("index.html"); //if html file is within public directory
});
app.post('/',function(req,res){
var username = req.body.username;
var htmlData = 'Hello:' + username;
res.send(htmlData);
console.log(htmlData);
});
app.listen(port);
Things you should keep in mind for future Ref :
- You were extending url encode to true
- You were not having any get request for your form
- You were using HTML named variable which is one of bad practices
Thanks & Cheers
In my case, I wasn't paying attention to the url I was posting from.
I had the page login which was posting and, if successful, renders the page account .
But, playing few times with these 2 pages, the link remained at but displayed the login page. So, when I was clicking the log in button which had a form with method = "post", I was getting the error Cannot POST /account.
So the fix was to correctly render the login page, by typing in the url of login page .
Another Way is that we can use .route method provided by express
Eg:
app.route("url")
.get(function())
.post(function());
remember to close the .route function using semi colon ;
Seems to work fine here.
The only bug I found is here:
extended: true;
You need to remove the semicolon at the end.
Also, you don't need action="/" in your form tag, just FYI.
You should call router instead of app
const router = express.Router();
router.use(bodyParser.urlencoded({ extended: false }));
router.post('/',function(req,res){
var username = req.body.username;
var htmlData = 'Hello:' + username;
res.send(htmlData);
console.log(htmlData);
});
