Post or send form data in node js express app; In this tutorial, i am going to guide on how to post or send form data in node js express application using HTTP post method. And as well as; will guide you on how do you handle a POST request in node js express app.
In this Node JS form POST example tutorial; i will create a simple html markup form for display simple form with some fields. Then submit form and handle post form request with data on node js express app.
Node js Express Form Post Example
Use the below given steps to send/post/submit form data using node js express app; is as follow:
- Step 1 – Create New Node Js Application
- Step 2 – Install Express and Body Parser
- Step 3 – Create index.js file
- Step 4 – Create HTML Markup Form
- Step 5 – Run Node js Express Form App
Step 1 – Create New Node Js Application
Open your command prompt and execute the following command on it to create a new node js application:
mkdir test-app cd test-app npm init
Step 2 – Install Express and Body Parser
Install express and busboy library into your node js express application by executing the following command on command prompt:
npm install express body-parser
- body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and make it available under req.body property. In other words, it simplifies the incoming request.
Step 3 – Create index.js file and Import Libraries
Create index.js and import the above installed libararies. So visit your app root directory and create route for showing form with fields and send data to node js router, as shown below:
const express = require('express');
var bodyParser = require('body-parser')
const app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/', urlencodedParser, (req, res) => {
console.log('Got body:', req.body);
res.sendStatus(200);
});
app.listen(3000);
Step 4 – Create HTML Markup File Upload
Create html markup for file upload form; so visit your app root directory and create create index.html file and add the following code into it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Node JS Express Post Form Data Example - Laratutorials.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Node JS Express Post Form Data Example - Laratutorials.com</h1>
<form action="/" method="POST">
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" aria-describedby="emailHelp" placeholder="Enter first name" name="first_name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" aria-describedby="emailHelp" placeholder="Enter last name" name="last_name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
Step 5 – Run Node js Express File Upload App
Open your command prompt and execute the following command to run node js express file upload application:
//run the below command node index.js
Conclusion
Post or send form data in node js express; In this tutorial, you have learned how to post/send form data in node js express application using HTTP post method. And as well as; will guide you on how do you handle a POST request in node js express app.