Node/Express BodyParser not returning data from input fields or returning "undefined"

Question

I have a basic express set up. I'm trying to do something which on tutorials seems pretty simple but is not working at all for me. I'm attempting to capture the data entered by a user in two inputs, a text input and a dropdown input.

My app.js file looks like this:

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var pug = require('pug');

// initialize express
var app = express();

// set up port
var port = process.env.PORT || 1337;

// setting up bodyParser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));

// setting up views
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

// initial homepage get
app.get('/', function(req, res) {
    res.render('index');
});

app.post('/', function(req, res) {
    var input = req.body.userInput;
    var quantity = req.body.quantity;

    console.log("input is: " + input);
    console.log("quantity is: " + quantity);
});

// listening on port
app.listen(port, function(err) {
    if (err) throw err;
    console.log("Server is running on port " + port);
});

My pug file form looks like this:

.card
   .card-body
     form(action='/', method="POST")
       .form-row
          input.form-control(type='text', placeholder="Search for an item by its id", name="userInput")
       .form-row.mt-2
          .form-group
             select.form-control(name="quantity")
                option(value='1') Qty: 1
                option(value='2') Qty: 2
                option(value='3') Qty: 3
                option(value='4') Qty: 4
                option(value='5') Qty: 5
   .card-footer
        button.btn.btn-outline-secondary(type='submit')
           i.fas.fa-shopping-cart.mr-2
           | Add to my cart

Everything renders properly. I gave a "name" field to each form input I have and I try to grab that data from req.body.(name) in the app.js file. But when I run it and input data, nothing shows up in the console log.

Have you seen network tab in browser? is post request actually hitting server? — BeeBee8
– BeeBee8, Commented Apr 6, 2018 at 17:52
It's not hitting the server. I don't see any "POST" in the network section of the console. — J.G.Sable
– J.G.Sable, Commented Apr 6, 2018 at 17:56
So your submit button is not actually submitting the form. As @vesse suggested bring button inside the form. — BeeBee8
– BeeBee8, Commented Apr 6, 2018 at 17:57

vesse · Accepted Answer · 2018-04-06 17:54:07Z

2

The problem is not in the body-parser but in your HTML. If you check from developer console you see no request being performed when the button is clicked, and that is because the button is not inside the form and thus does nothing.

Take the .card-footer out to have the button inside the form and you'll receive the request with parameters. The request will hang since post handler does not return anything, but you will see the parameter in the console.

answered Apr 6, 2018 at 17:54

vesse

5,0781 gold badge28 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

J.G.Sable Over a year ago

Winner winner! This was the solution. Thank you so much. I knew it was simple.

BeeBee8 Over a year ago

@J.G.Sable I suggest you to make it habit of inspecting network tab when dealing with http requests, probably you would have figured it yourself.

J.G.Sable Over a year ago

Yes, thank you. I'm brand new to node/express so I'll incorporate that as a general practice. At least I won't make this exact same mistake again (but probably one substantially similar), hah.

Collectives™ on Stack Overflow

Node/Express BodyParser not returning data from input fields or returning "undefined"

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related