How to Create a Pre-Filled forms in Node.js ?
Pre-Filled forms are those forms that are already filled with desired data. These are helpful when a user wants to update something like his profile, etc.
We just create a folder and add a file, for example, index.js. To run this file you need to run the following command.
node index.js
Filename: SampleForm.ejs
<!DOCTYPE html><html> <head> <title>Pre-Filled Form Demo</title></head> <body> <h1>Update User</h1> <form action="saveData" method="POST"> <pre> Email : <input type="text" name="email" value='<%=user.email%>'> <br> Name : <input type="text" name="name" value='<%=user.name%>'> <br> Number : <input type="number" name="mobile" value='<%=user.mobile%>'> <br> Address : <input type="text" name="address" value='<%=user.address%>'> <br> <input type="submit" value="Submit Form"> </pre> </form></body> </html> |
Filename: index.js
const express = require("express")const path = require('path')const app = express() var PORT = process.env.port || 3000 // View Engine Setupapp.set("views", path.join(__dirname))app.set("view engine", "ejs") app.get("/", function(req, res){ // Sample date to be filled in form var user = { email: 'test@gmail.com', name: 'Gourav', mobile: 9999999999, address: 'ABC Colony, House 23, India' } res.render("SampleForm", { user: user } );}) app.listen(PORT, function(error){ if(error) throw error console.log("Server created Successfully on PORT", PORT)}) |
Steps to run the program:
- The project structure will look like this:
- Make sure you have installed ‘view engine’ like I have used “ejs” and also installed express module using following commands:
npm install express npm install ejs
- Run index.js file using below command:
node index.js
- Now Open browser and type this URL:
http://localhost:3000/
- Then you will see the Pre-Filled Update User Form as shown below:
So this is how you can create your own Pre-Filled forms.
.png)
