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 Setup app.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.