How to post form data using NodeJS

In this Node JS tutorial, you can learn How to Create HTML Form in Node js application and then after you can learn How to load HTML Form data in the browser under this Node.js Application and lastly you can find how to submit HTML form data in Node JS application. If you are beginner in the Node.js and you are planning to use use node.js for build web application. So this tutorial will help you to learn How to process HTML Form data under this Node.js Application.

In this tutorial we will use Node.js Express module for create HTML form in Node.js application and then after by using Node.js Express package we will submit HTML form data by using POST method and we will display submitted HTML form data in json format on the the web page. Under this tutorial, we will main focused on the Node.js Express package and How we can use Node.js express package for submit form data. From this post you can simple learn Node js express form submit using post method, so you can learn node js parse form data.

Create HTML form and follow the steps

Step 1: Create Node Application

To create node application type the following command in your terminal

mkdir form
cd form

Step 2 : Download & Install Node.js Express

To download Express package type the following command in your terminal

Note: You must type this command in form directory that you have created

npm install express

Step 3 : Create Node.js Application

const express = require('express');

const app = express();

app.use(express.urlencoded());

app.get('/', function(request, response, next){

    response.send(`
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <div class="container">
            <h1 class="text-center mt-3 mb-3">Submit Form Data in Node.js</h1>
            <div class="card">
                <div class="card-header">Sample Form</div>
                <div class="card-body">
                    <form method="POST" action="/">
                        <div class="mb-3">
                            <label>First Name</label>
                            <input type="text" name="first_name" id="first_name" class="form-control" />
                        </div>
                        <div class="mb-3">
                            <label>Last Name</label>
                            <input type="text" name="last_name" id="last_name" class="form-control" />
                        </div>
                        <div class="mb-3">
                            <label>Email Address</label>
                            <input type="text" name="email_address" id="email_address" class="form-control" />
                        </div>
                        <div class="mb-3">
                            <input type="submit" name="submit_button" class="btn btn-primary" value="Add" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `);


});

app.post('/', function(request, response, next){

    response.send(request.body);

});

app.listen(2000);

As you can see we have used app.post() in order to get data from html form

request.body will give you all the data of form which is first name, last name, email address.

I fyou want to access single field only use req.body.field_name

For example : req.body.first_name as first_name is name attribute in html form

Thank you!!