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 : Node JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: