Nader Laroussi Nader Laroussi - 4 months ago 59
Node.js Question

Cannot POST to a route from and HTML form

I'm building a nodejs/expressjs application and this is my architecture:
+ routes
- candidate.js
- index.js
+ views
- layout.vash
- register.vash
- server.js

in my server.js file, I put this code to manage routes:

var routes = require('./routes/index');
var candidate = require('./routes/candidate');

app.use('/', routes);
app.use('/candidate', candidate);


in candidate.js, all get requests work fine, but there is a problem in post requests, it can't resolve the path: Cannot POST /caregister

server.js



var routes = require('./routes/index');
var candidate = require('./routes/candidate');
var employer = require('./routes/employer');


var app = express();

app.set('view engine', 'vash');

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('/', routes);
app.use('/candidate', candidate);
app.use('/employer', employer);

app.set('port', (process.env.PORT || 3000));

app.listen(app.get('port'), function(){
console.log('server is listening to ' + app.get('port'));
});


routes/index.js



var express = require('express');
var router = express.Router();

router.get('/', function(req, res){
res.render('index');
});

module.exports = router;


routes/candidate.js



var express = require('express');
var router = express.Router();
var Candidate = require("../models/candidate");

router.get('/', function(req, res){
res.render('candidatelogin'); // relative to candidatelogin.vash
});


router.post('/caregister', function(req, res){

var username = req.body.username;
var email = req.body.email;
var password = req.body.password;
var passwordConf = req.body.passwordConf;


console.log(username + " " + email);

});


module.exports = router;


views/candidatelogin.vash



@html.extend('layout', function(model){
@html.block('body', function(model){
<h1>Jobseeker</h>

<div id="register">
<h3>Create new Account</h3>
<form method="post" action="/caregister">
<input type="text" name="username" placeholder="username"><br/><br/>
<input type="text" name="email" placeholder="email"><br/><br/>
<input type="password" name="password" placeholder="password"><br/><br/>
<input type="password" name="passwordConf" placeholder="password confirmation"><br/><br/>
<input type="submit" value="Register">
</form>
</div>
})
})

Answer

When using app.use and including a prefix like candidate that means that you should use this prefix to access this route later on.

So your form in candidatelogin.vash should post to /candidate/caregister url:

    <div id="register">
        <h3>Create new Account</h3>
        <form method="post" action="/candidate/caregister">
            <input type="text" name="username" placeholder="username"><br/><br/>
            <input type="text" name="email" placeholder="email"><br/><br/>
            <input type="password" name="password" placeholder="password"><br/><br/>
            <input type="password" name="passwordConf" placeholder="password confirmation"><br/><br/>
            <input type="submit" value="Register">
        </form>
    </div>
Comments