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
html
<!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
javascript
const express = require("express") const path = require( 'path' ) const app = express() var PORT = process.env.port || 3000 // View Engine Setup app.set("views", path.join(__dirname)) app.set("view engine", "ejs") app.get("/", function (req, res){ // Sample data 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.