How to POST Form Data in Node JS

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.

Under this post, we will make simple HTML form in Node js application and then after we will show you simple example for form submission using node js express and after form submit using POST method we will show how to parse form data by using node js express package. So for create HTML form and submit form data using Node js express you have to follow below steps.

Preview

Step 1: Create Node Application

First We have to create Node application in our computer. So for this, we have go to command prompt and first create directory for node application and then after we have go into that directory using command prompt.

mkdir form
cd form

Step 2 : Download & Install Node.js Express

Once you have go into directory in which you want to create node js application. After this we want to download and install Node.js Express package. So for this in the command prompt we need to run following command. So this command will download and Install Node.js Express package in your define directory.

npm install express

Step 3 : Create Node.js Application

Once you have download Node.js Express module, so next we need to create Node.js application file. So for this, we need to open directory in which we have download Node.js Express package in the text editor. And under text editor we need to create Node.js file with name process.js

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

Now under this tutorial, for use Node.js Express package in the JavaScript file, so by using require() method we can use Node.js package under the Node.js application.

Next for define Node.js Express application, so by using express() function, we can define that this is Node.js Express application.

When we have deal with Form data in Node.js application, so we need to create middleware, so by using app.use() function, we can create middle ware in the node js application.

But here we have Node.js Express module, so we need to use Express middleware, so by using express.urlencoded() function, we can use Node.js Express middleware.

After this, we have to write app.get() function, this function has receive HTTP Get request in the browser, so when web page has been load then this function will be first called, and under this function, we will create HTML form, So when web page has been load in the browser, then HTML form will be display on the web page.

Under this app.get() function, for display HTML form, so under this function, we have to use respose.send() function, so this function function, we will display HTML form, because this function will print output in the browser, which you can seen in above source code.

After this for handle form data, so we need to use app.post() function, this function will received post data which will be receive at the server.

And under this app.post() function for parse HTML Form data, we have to use respose.send() function, and under this function, we have to write request.body. So it will display submitted data of HTML form on the web page in JSON format.

And lastly, we need to define port number on which we can access node js application in the browser. So by using app.listen() function, we can define port number in the Node.js application.

So this is complete step by step process of How to create HTML Form in the Node.js application and how to submit HTML form data in the Node.js application. I hope you have enjoy this post and you have understand this Node.js tutorial.