Node JS Express Form Submission Example
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: 'itsolutionstuff@gmail.com' }
i hope it can help you...
