0
votes

app.js

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");

const app = express();

app.set(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'ejs');
app.use(express.static('public'));

var blogName = "";

app.get("/", function(req, res){
    blogName = "Priyanshu Gupta's Not-So-Secret Diary";
    res.render("index", {titleName : blogName});
})
app.get("/about", function(req, res){
    blogName = "About This Blog";
    res.render("about", {titleName : blogName});
})
app.get("/contact", function(req, res){
    blogName = "Contact Me";
    res.render("contact", {titleName : blogName});
})

app.get("/blog", function(req, res){
    blogName = "Blog Post";
    res.render("blogPage", {titleName : blogName})
})

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

app.post("/contact", (req, res) => {
    console.log(req.body.msg);
})

app.listen(3000, function(){
    console.log("Your server is running on port 3000!");
})

I used express in this code and getting error like

TypeError: Cannot read property 'msg' of undefined at F:\Priyanshu\Coding Playground\Web Development\Blog\app.js:36:26 at Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5) at next (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5) at F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:281:22 at Function.process_params (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:335:12) at next (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\index.js:275:10) at serveStatic (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\serve-static\index.js:75:16) at Layer.handle [as handle_request] (F:\Priyanshu\Coding Playground\Web Development\Blog\node_modules\express\lib\router\layer.js:95:5)

contact.html

<%- include('header') %>

<div class="container mt-4">
    <h1 style="text-align: center;">Contact Me</h1>
    <form action="/contact" method="POST">
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" placeholder="[email protected]" autocomplete="off">
      </div>
      <div class="mb-3">
        <label for="msg" class="form-label">Example textarea</label>
        <textarea class="form-control" name="msg" rows="3" style="margin-top: 0px; margin-bottom: 0px; height: 224px;" required></textarea>
      </div>
      <button type="submit" class="btn btn-success mb-4">Submit</button>
    </form>
</div> 
<%- include('footer') %> 

Body-Parser cannot detect the msg in contact form please can anyone figure it out what is the problem I am facing here

2
try add this app.use(bodyParser.json());Eka Cipta
yeah I got it broPriyanshu

2 Answers

0
votes

The data from HTML file was sent successfully but app.js can't parse the request body. For parsing data into JSON file body-parser should be used properly. Also body-parser should be used on every .js file when server files are divided by structure.

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

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");

const app = express();

app.set(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'ejs');

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

/// try this
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));

var blogName = "";

app.get("/", function(req, res){
    blogName = "Priyanshu Gupta's Not-So-Secret Diary";
    res.render("index", {titleName : blogName});
})
app.get("/about", function(req, res){
    blogName = "About This Blog";
    res.render("about", {titleName : blogName});
})
app.get("/contact", function(req, res){
    blogName = "Contact Me";
    res.render("contact", {titleName : blogName});
})

app.get("/blog", function(req, res){
    blogName = "Blog Post";
    res.render("blogPage", {titleName : blogName})
})

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

app.post("/contact", (req, res) => {
    console.log(req.body.msg);
})

app.listen(3000, function(){
    console.log("Your server is running on port 3000!");
})
0
votes

You forgot the header application/json HTML forms dont support it, so you need a workaround. I suggest using it with the fetch API and then post the data or this. Stil not 100% confident if this is the case, but try doing this.