CODEWITHSUNDEEP
node.jsmongodbformsexpressbody-parser
Shinnen
Shinnen

Reputation: 3

body-parser: cannot fetch the values from the form

I have created a form for signing up a user. I want to fetch the values from the form using body-parser but I am not able to do so. While prinnting in the console it gives undefined printed. I don't get what am I doing wrong. I even tried using postman but it doesn't work. Here is my code:

var express = require('express'),
app = express(),
mongoose = require('mongoose'),
bodyParser = require('body-parser'),
passport =  require('passport'),
LocalStrategy =  require('passport-local'),
methodOverride = require('method-override'),
flash = require('flash'),
session = require('express-session');
app.get("/about", function(req, res) {
   res.render("about");
});

app.get("/register", function(req, res) {
    res.render("register");
});

app.post("/register", function(req, res) {
    var firstName = req.body.firstName,
        lastName = req.body.lastName,
        username = req.body.username,
        email = req.body.email;
    var newUser = new User({
        firstName: firstName,
        lastName: lastName,
        username: username,
        email: email
    });
    console.log(firstName + " " + req.body.password + " " + req.body.c_password);
    User.register(newUser, req.body.password, function(err, user) {
        if(err) {
            return res.render("register", {'error': err.message});
        }
        passport.authenticate('local')(req, res, function() {
            req.flash('success', 'Welcome ' + user.username);
            res.redirect('/home');
        })
    })
   });

   var port = process.env.PORT || 3000;

   app.listen(port, function() {
        console.log("Service Running");
   });

And here is my form

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hotel Site</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous">
    <link rel="icon" href="https://www.svgrepo.com/show/12002/hotel.svg" type="image/x-icon">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>

<div class="container" style="margin-bottom: 4.5rem;">
        <h1 style="text-align: center; margin-top: 7rem; margin-bottom: 20px">Sign Up</h1>
        <div class="col-lg-6" style="margin: auto;">
            <form action="/register" method="POST" enctype="multipart/form-data">
                <div class="form-row">
                    <div class="form-group col-6">
                        <input class="form-control" type="text" name="firstName" placeholder="First Name" required>
                    </div>
                    <div class="form-group col-6">
                        <input class="form-control" type="text" name="lastName" placeholder="Last Name" required>
                    </div>
                </div>      
                <div class="form-group">
                    <input class="form-control" type="text" name="username" placeholder="Username" required>
                </div>
                <!-- <div class="form-group">
                    <input class="form-control" type="email" name="email" placeholder="E-mail" required>
                </div> -->
                <div class="form-group">
                    <input class="form-control" type="password" name="password" placeholder="Password" required>
                </div>
                <div class="form-group">
                    <input class="form-control" type="password" name="c_password" placeholder="Confirm Password" required>
                </div>
                <div class="form-group">
                    <button class="btn btn-lg btn-primary btn-block">Submit</button>
                </div>
            </form>
            <a href="/home">Go Back</a>
        </div>
</div>
</body>

Help very much appreciated!!!

Upvotes: 0

Views: 318

Answers (3)

lareina lin
lareina lin

Reputation: 1

I meet problem too, and I found if remove

app.use(bodyParser.urlencoded({ extended: false }));

and use

app.use(bodyParser.json({ type: 'application/x-www-form-urlencoded' }));

this problem can be fixed.

Upvotes: 0

AKSHAY RAICHUR
AKSHAY RAICHUR

Reputation: 1

You've successfully imported body-parser into your app, but you've failed to use it. Add the following code before you use your routes.

app.use(bodyParser.urlencoded({ extended: false }))

I hope it was helpful.

Upvotes: 0

user10365179
user10365179

Reputation: 11

Express uses middleware, which are functions that have access to incoming requests. Requests can be modified etc. Simply put middleware can be used for lots of things.

You have not setup bodyParser as middleware so it will not work. This can be done by:

app.use(bodyParser.urlencoded({extended: false})) for form data app.use(bodyParser.json()) for incoming JSON before your routes.

Here's the ExpressJs guide on middle: https://expressjs.com/en/guide/writing-middleware.html

Upvotes: 1

Related Questions