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.

My Personal Notes

Recommended Posts: