Node js Express Form Post Example

Post or send form data in node js express; In this tutorial, i will provide you complete guide on 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.

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 Post Form Data Tutorial with Example

  • 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.

Be First to Comment

Leave a Reply

Your email address will not be published.