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

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:

Got body: [Object: null prototype] { first_name: 'Hardik', last_name: 'Savani', email: '[email protected]' }

i hope it can help you...

Tags :