How to Create a Pre-Filled forms in Node.js ?
Last Updated :
13 Feb, 2023
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
app.set("views", path.join(__dirname))
app.set("view engine", "ejs")
app.get("/", function (req, res){
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...