Getting empty response in req.body of Post in Express.js

Question

here is my two files attached. i am getting empty response from req.body,

1. my index.html file is

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="container"> <br> <div class="jumbotron"> <h1 class="display-4">Send Message</h1> <br> <input id="name" class="form-control" placeholder="name"> <br> <textarea id="message" class="form-control" placeholder="message"></textarea> <br> <button id="Send" class="btn btn-success">Send</button> </div> <div id="messages"> </div> </div> <script> $(() => { $('#Send').click(()=>{ var message = {name: $("name").val(), message: $("message").val()} postMessages(message) }) getMessages() }) function addMessage(message){ $("#messages").append(`<h4>${message.name}</h4> <p>${message.message}</p>`) } function getMessages(){ $.get('http://localhost:3000/messages',(data)=>{ data.forEach(addMessage); }) } function postMessages(message){ $.post('http://localhost:3000/messages',message) } </script>

2. my server.js file is

 var express = require('express') var bodyParser = require('body-parser') var app = express() app.use(express.static(__dirname)) app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: false})) var messages = [ {name: 'Tim', message: 'Hi'}, {name: 'Jane', message: 'Hello'} ] app.get('/messages', (req, res) =>{ res.send(messages) }) app.post('/messages', (req, res) =>{ console.log(req.body) messages.push(req.body) res.sendStatus(200) }) var server = app.listen(3000, () => { console.log('server is listening on port', server.address().port) })

3. my output

As can be seen i am getting undefined in name and message section after pressing send button

Answer 1

The problem lies in your form handling, specifically var message = {name: $("name").val(), message: $("message").val()} should be var message = {name: $("#name").val(), message: $("#message").val()}

Basically you are trying to get elements by tag rather than id.