Node JS Express Form Submission Example

About Us:

We are from free coder. We are a group of web developers who are passionate about web development. You can learn from us php, laravel, node js, vue js, react js and many other topic on web developement.
we are very happy to help you.
free coder

Today what you are going to learn:

Hello Brother,

This tutorial is focused on node.js express form submit lesson. This post will give you simple lesson of node js express form post lesson. 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 lesson of form submission with getting parse post requested data using node js express. let's see simple lesson:

Lesson 1: Create Node App

run bellow command and create node app.

mkdir my-app

cd my-app

npm init

Lesson 2: Install body-parser

run bellow command and create node app.

npm i body-parser

Lesson 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);

Lesson 4: Create index.html file

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Node JS Express Form Submission Lesson - 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 Lesson - 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="lessonInputEmail1">Email address</label>

<input type="email" class="form-control" id="lessonInputEmail1" 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

Result:-

Got body: [Object: null prototype] { first_name: 'Sagor', last_name: 'Savani', email: 'freecoder.co@gmail.com' }

thank you very much for following up with me.

Tags

Recent Posts

Related Posts