In this article, we will be passing the form data (HTML Form) and displaying it.

Prerequisite

Node.js must be installed on your local system.

Steps

Install Express.js and module body-parser by writing the below code in your terminal

npm init --y
npm i express
npm i body-parser
npm i nodemon

Make a Js file (filename can be any, I am naming index.js)
Make a folder name views and inside the folder make ejs file (I am naming it index.ejs)

File Structure

Make an HTML form in index.ejs

 //index.ejs

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Passing Data</title>
 </head>
 <body>
  <h1>Write your name below</h1>
         // "/submit" :- URL to which form data is submitted
         <form action="/submit" method="post">
             //Taking input of First Name
             <input type="text" name="firstName" placeholder="Enter your First Name">

             //Taking input of Last Name
             <input type="text" name="lastName" placeholder="Enter your last name">
             <input type="submit" value="submit">
         </form>
 </body>
 </html>

Import express, body-parser module in index.js and start the server

 //index.js
 import express from "express";
 import bodyParser from "body-parser";

 const app = express();
 const port = 3000;
 app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
 })

To start the server write the below command in the terminal
```
 nodemon index.js
```

Render the index.ejs

 //index.js

 app.get("/", function (req, res) {
     res.render("index.ejs");
 })

Now Take the input from the form and rendering it

 //index.js

 //For taking the input
 app.use(bodyParser.urlencoded({ extended: true }));

 app.post("/submit", function (req, res) {

     //The below line will take input from index.ejs file from body tag
     const firstname = req.body["firstName"];
     const lastname = req.body["lastName"];

     //Store the input values in object form
     res.render("index.ejs", { FirstName: firstname, LastName: lastname });
 })

By using EJS Tag in index.ejs, we will check if the input value is enter then show that value else show the HTML Form

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Passing Data</title>
 </head>
 <body>
     <% if(locals.FirstName) { %>
         <h1><%= FirstName %></h1>
         <h1><%= LastName %></h1>
     <% } else { %>
         <h1>Write your name below</h1>
         <form action="/submit" method="post">
             <input type="text" name="firstName" placeholder="Enter your First Name">
             <input type="text" name="lastName" placeholder="Enter your last name">
             <input type="submit" value="submit">
         </form>
     <% } %>
 </body>
 </html>

Output

On starting Server, you will see below the form

Fill out the Form and Click on Submit, You will get the below output

You can refer to the code here:- https://github.com/hetashridk/FormData-passing-in-ejs

Conclusion

In this blog, we have sent an HTML Page to render and give us a dynamic response. We have sent the request by using the module body-parser and sent an HTML page by using EJS. You can any HTML page using EJS.

If you are interested in learning more about EJS, there are many resources available online. You can also find many examples of EJS templates that you can use as a starting point. Please comment below if you have any queries or facing problems in implementing the Project.

Kansariwala Hetashri Dhavalkumar's Blog

Kansariwala Hetashri Dhavalkumar's Blog

Passing Data and Displaying it in EJS

Table of contents

Prerequisite

Steps

File Structure

Output

Conclusion