CODEWITHSUNDEEP
javascripthtmlmysqlnode.js
Shane Lee
Shane Lee

Reputation: 25

Req.Body undefined NODE.JS POST Request

I'm currently working on a simple Node.JS app that communicates with mysql database.

The app gets data from the database and puts it in a table using app.get and it works fine.

The problem I am having is that req.body is not returning anything when using app.post. The app will submit to the database, but because req.body is not returning anything, the values are null. It will post actual values if I swap the req.body variables with hardcoded variables e.g. "12320".

I have therefore isolated the problem to post requests which use req.body.

If I console log req.body it is empty.

I have read just about every stackoverflow question on this and have not been able to find a solution.

I have tried reinstalling body-parser, express, morgan, and mysql.

I have tried recreating the app in a fresh directory and installing the modules again.

I have tried renaming the variables incase that was having some effect (e.g. name="test", req.body.test)

But all of this was to no avail.

<form id="submit_missing" action="/submit_quote" method="POST" enctype="multipart/form-data">

<input type="text" id="submit_quote_id" name="submit_quote_id" placeholder="Quote ID">

<input type="text" id="submit_priority" name="submit_priority" placeholder="Priority" list="priority_list">

<input type="text" id="submit_customer" name="submit_customer" placeholder="Customer">

<input type="text" name="submit_who" id="submit_who" placeholder="Who's On it" list="purchasing">

<input type="text" id="submit_account_manager" name="submit_account_manager" placeholder="Account Manager" list="account_managers">

<button id="submit_quote">SUBMIT</button>

<form>

// server.js

const express = require('express')
const app = express()
const morgan = require('morgan')
const mysql = require('mysql')
const bodyParser = require('body-parser')

app.use(bodyParser.json({ type: '*' }))
app.use(bodyParser.urlencoded({ extended: true }))

app.use(express.static('./public'))
app.use(express.static('./files'))

const user = ***
const pass = ***

function getBoardConnection() {
  return mysql.createConnection({
    host: "localhost",
    port: "3306",
    user: user,
    password: pass,
    database: "board"
  })
}

app.get('/get_board_quotes', (req, res) => {
  const con = getBoardConnection()

  const queryString = "SELECT * FROM board_quotes WHERE quote_complete = '0'"
  con.query(queryString,(err, rows, fields) => {
    if (err) {
      console.log("Failed to query for /get_board_quotes : " + err)
    }
    console.log("Getting data from database for /get_board_quotes")
    res.json(rows)
  })

})


app.post('/submit_quote/', (req, res) => {
  console.log(req.body)
   quote_id = req.body.submit_quote_id
   priority = req.body.submit_priority
   customer = req.body.submit_customer
   who_quoted = req.body.submit_who
   account_manager = req.body.submit_account_manager
   type = ""


   queryString = "INSERT INTO board_quotes (quote_id, priority, customer, who_quoted, account_manager, quote_type) \
   VALUES (?, ?, ?, ?, ?, ?)"

   getBoardConnection().query(queryString, [quote_id, priority, customer, who_quoted, account_manager, type], (err, results, field) => {
     if (err) {
       console.log("Failed to insert new board order " + err)
       return res.redirect('/board/quotes.html')
     }
     console.log("Inserted a new board with id ")
     res.redirect('/board/quotes.html')
   })

})

app.listen(6565, () => {
  console.log("Server is running")
})

Output 


Server is running
Getting data from database for /get_board_quotes
{}
Failed to insert new board order Error: ER_BAD_NULL_ERROR: Column 'quote_id' cannot be null

{} is the output for console.log(req.body)

Any help would be greatly appreciated.

Upvotes: 0

Views: 3062

Answers (3)

user1009387
user1009387

Reputation:

The issue you’re having is that you’ve set enctype="multipart/form-data" on your <form> HTML tag. By default, body-parser doesn’t parse bodies with a Content-Type header of multipart/form-data, which is what you’re telling the browser to send.

There is an easy way to fix this: I’d recommend just not setting enctype on the <form> element, as the browser will default to application/x-www-form-urlencoded and this is the type of form body body-parser will parse by default.

You can otherwise try passing type: "multipart/form-data" as an option when you call bodyParser.urlencoded(), which will make body-parser parse anything sent to it with that content type. (Correction: body-parser actually just silently fails for me if I tell it to parse multipart/form-data)

This question/answer may be of further help.

Upvotes: 1

Darek Adamkiewicz
Darek Adamkiewicz

Reputation: 453

At first I would recommend to use curl utility to simplify POST request, issue the following (I'm assuming here that you calling from the same machine hence 'localhost'):

curl -d "submit_quote_id=999" -X POST http://localhost:6565/

and see what you get

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

Body parser does not work with : Content-Type:multipart/form-data header

Multer is used to handle Content-Type:multipart/form-data header , while uploaing file with form-data

Body Parser only work with :

  • Content-Type:application/x-www-form-urlencoded ,

  • Content-Type:application/json

remove enctype="multipart/form-data" in your form & try to submit form

Upvotes: 1

Related Questions