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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Filename: index.js

filter_none

edit
close

play_arrow

link
brightness_4
code

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)
})

chevron_right


Steps to run the program:

  1. The project structure will look like this:
    project structure
  2. 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
    
  3. Run index.js file using below command:
    node index.js

    console output

  4. Now Open browser and type this URL:
    http://localhost:3000/
  5. Then you will see the Pre-Filled Update User Form as shown below:
    output

So this is how you can create your own Pre-Filled forms.




My Personal Notes arrow_drop_up

To obtain a position of responsibility that utilizes my skills and keen to work in an environment where I can enrich my knowledge

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.