Node JS Express Form Submission Example

By Hardik Savani March 25, 2021 Category : Node JS

Hi dev,

This tutorial is focused on node.js express form submit example. This post will give you simple example of node js express form post example. you will learn node js express post form data. you will learn node js express parse form data.

here, i will give you very simple example of form submission with getting parse post requested data using node js express. let's see simple example:

Preview:

Step 1: Create Node App

run bellow command and create node app.

mkdir my-app
cd my-app
npm init

Step 2: Install body-parser

run bellow command and create node app.

npm i body-parser

Read Also: How to Upgrade Node.js Version in Ubuntu?

Step 3: Create app.js file

app.js

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 index.html file

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Node JS Express Form Submission Example - ItSolutionStuff.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/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Node JS Express Form Submission Example - ItSolutionStuff.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>

make sure you have to create "uploads/resized" directory.

now you can simply run by following command:

npm start

open following url:

localhost:3000

Output:

Read Also: Node JS Mysql Connection Example
Got body: [Object: null prototype] { first_name: 'Hardik', last_name: 'Savani', email: 'itsolutionstuff@gmail.com' }

i hope it can help you...

Tags :
Previous

Node JS Mysql Connection Example
Next

Laravel Copy Record using Eloquent Replicate Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares