Express.js req.body is null when form submitted

Question

I have a simple html form:

<div class="signup-form">
  <h2>Signup for an account</h2>
  <form method="POST" action="/submit-signup">
    <input type="text" title="username" placeholder="username" />
    <input type="password" title="username" placeholder="password" />
    <button type="submit" class="btn">Submit</button>
  </form>
</div>

and an index.js with routes:

var bodyParser = require('body-parser')
const express = require('express')
const app = express()
const port = 3000


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

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'user',
  host: 'localhost',
  database: 'app',
  password: 'password',
  port: 5432,
})


app.get('/', function(req, res) {
  res.sendFile(__dirname +'/index.html');
});

app.get('/login', function(req, res) {
  res.sendFile(__dirname +'/login.html');
});

app.get('/signup', function(req, res) {
  res.sendFile(__dirname +'/signup.html');
});


app.post('/submit-signup',(req, res) => {
  console.log(req.body)
  const username = req.body.username
  const password = req.body.password

  pool.query('INSERT INTO users (username, password) VALUES ($1, $2)', [username, password], (error, results) => {
    if (error) {
      throw error
    }
    response.status(201).send(`User added with ID: ${result.insertId}`)
  })
})


app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

Every time the form is submitted with answers the request body logs as {} and the error is thrown from the query because of the null value (the column in my database is set to not-null). I've tried most fixes from old stack overflow posts, so any help is appreciated

score 0 · Answer 1 · answered Dec 28 '21 at 09:18

Your problem cuz you don't use a name tag in HTML form.

<div class="signup-form">
  <h2>Signup for an account</h2>
  <form method="POST" action="/submit-signup">
    <input type="text" name="username" title="username" placeholder="username" />
    <input type="password" name="password" title="password" placeholder="password" />
    <button type="submit" class="btn">Submit</button>
  </form>
</div>

score 0 · Accepted Answer · answered Dec 28 '21 at 09:26

You are using the body-parser middleware. This middleware by default will try to parse every http body into a js-object based on a given json value.

As you are sending your data over an HTML form this data is not in JSON representation, but in the data generated by the HTML form.Mozilla Specs

To make this work you either need to iplement a way to read the body sent by the HTML form or use a more modern approach by sending a (REST) JSON request to your express server.

To make your code work use body-parser.urlencoded() as HTML form data is an url encoded text Ref to existing Stackoverflow answer
To make your form a bit more modern, use a JavaScript framework and follow a client-server pattern. Have a look at this tutorial REST tutorial with express

The issue was that I needed to add {extended:true} for the urlencoded bodyparser to work. The existing stackoverflow answer helped me figure that out, thank you! — rose31, Dec 28 '21 at 18:46

score 0 · Answer 3 · answered Dec 28 '21 at 10:52

0

Add name attribute in your html input field

answered Dec 28 '21 at 10:52

Diwas Acharya

44
4

Express.js req.body is null when form submitted

3 Answers3