How to get form data with post method in Express.js

In this tutorial, we will learn how to get the form data with the post method. Forms are a secure way of collecting users’ data, as they allow us to send data using a POST request. We will use ExpressJs to get the data.

Getting form data with the post method in Express.js

First, we need to install the express and body-parser packages.

body-parser is used to process the data sent through an HTTP request.

npm i express body-parser

We will create an index.js file and write the following code to make sure the server is running.

var express = require('express');
var app = express();
 app.listen(5000,()=>{
   console.log("Server is running")
})

Then we will create an index.html file, where we will create a form to send the data. The form has two attributes:

  • action: the URL where data is sent for processing when submitted.
  • method: it can either be POST or GET, we will be using the post method here.
<form action="/" method="post">
       <label> First Name:</label>
        <input type="text" name="firstName">
        <label>Last Name:</label>
        <input type="text" name="secondName">
        <label>Email:</label>
        <input type="email" name="email">
        <button type="submit">Enter the info</button>
</form>

In our index.js file, we will require body-parser and write the following code:

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

bodyParser.json() is used to get data in JSON format.
bodyParser.urlencoded({ extended: true }) is used to decode the information sent through the HTML form.

The app.get() method is used to access the HTML form and the app.post() method to post the data.

app.get('/', function(req, res){
   res.sendFile(__dirname+'/form.html');
 });
 app.post('/', function(req, res){
    console.log(req.body);
    res.send("Received your data!!");
 });

In the post method, we will console log the data that was submitted in the form, and then it will send the response ‘Received your data ‘.

We will run the file using the command:

node index.js

Complete code to get form data with post method in Express.js

index.html

<body>
    <form action="/" method="post">
       <label> First Name:</label>
        <input type="text" name="firstName">
        <label>Last Name:</label>
        <input type="text" name="secondName">
        <label>Email:</label>
        <input type="email" name="email">
        <button type="submit">Enter the info</button>
    </form>
</body>

index.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true })); 
app.get('/', function(req, res){
   res.sendFile(__dirname+'/form.html');
 });
 app.post('/', function(req, res){
    console.log(req.body);
    res.send("Received your data!!");
 });
 app.listen(5000,()=>{
   console.log("Server is running")
})

Output:

get form data with post method in Express.js

body-parser in express

express.js form data

Leave a Reply

Your email address will not be published. Required fields are marked *