CODEWITHSUNDEEP
node.jsexpressejs
Digvijay
Digvijay

Reputation: 3271

Unable to get form data in NodeJS Express

I have created form and tryinng to get from data on server data for that I am using ejs templating in my node app. There is no error is showing up but I am unable to get data in console.

Below is my code:

server.js

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

const app = express();

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

app.set('views',path.join(__dirname,'views'));
app.set('view engine','ejs');

const port = process.env.PORT || 3000;

const key = process.env.SECRET_KEY;


app.get('/register',(req,res) => {

  res.render('register',{title:'Register here'});
});

app.post('/register',(req,res) => {

  const name=req.body;
  console.log(name);
});

app.listen(port,(req,res) => {

   console.log(`App is running at ${port}`);
});

register.ejs

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<title><%= title %></title>

<style>
  
    h1 {
     text-align: center;
     margin-top:50px; 
     }
     
     .form{
       margin-top:50px;
       margin-left:30%;
       margin-right:30%;
     }
     
     button{
        margin-top:20px;
     }

</style>

</head>
<body class="container">

<h1><%= title %></h1>

<div class="form">

    <form action='/register' method='POST'>

    <input name="nam" class="form-control" type="text" placeholder="Name" aria-label="default input example">
    <button type="button" class="btn btn-primary">SUBMIT</button> 
    
    </form>

</div>

 <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> 

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

</body>
</html>

Someone let me know what I am doing wrong in above code or what needs to be correct.

Upvotes: 1

Views: 1141

Answers (2)

Gianluca
Gianluca

Reputation: 980

To submit a form, you must tell the button to submit the form. Using type="button" will not submit your form, but just act as a button being clicked.

To fix this, simply do this:

<button type="submit" class="btn btn-primary">SUBMIT</button>

on button click, this will not submit the form it is currently in!

Upvotes: 1

Megh Rathod
Megh Rathod

Reputation: 158

use this in the Nodejs post request:

const name = req.body.nam;

and also change this:

<button type="submit">

Upvotes: 1

Related Questions