Express.js | Form Data

Hello folks! Welcome back to a new edition of our tutorial on ExpressJS. In this tutorial guide, we will be studying about ExpressJS Form Data.

Forms are a crucial part of the web. Almost every website we go to offers us forms that submit or fetch some information for us. To start with forms, we are first going to install the body-parser and multer middleware.

To install the body-parser and multer, go to your terminal and use -

npm install --save body-parser multer

Replace your index.js file contents with the following code -

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var app = express();

app.get('/', function(req, res){
   res.render('form');
});

app.set('view engine', 'pug');
app.set('views', './views');

// for parsing application/json
app.use(bodyParser.json()); 

// for parsing application/xwww-
app.use(bodyParser.urlencoded({ extended: true })); 
//form-urlencoded

// for parsing multipart/form-data
app.use(upload.array()); 
app.use(express.static('public'));

app.post('/', function(req, res){
   console.log(req.body);
   res.send("recieved your request!");
});
app.listen(3000);

After importing the body parser and multer, we will use the body-parser for parsing json and www-form-urlencoded header requests, while we will make use of multer for parsing multipart/form-data.

READ: Express.js | Serving Static Files

Let us create an HTML form to test this out. Create a new view called form.pug with the following code -

html
html
   head
      title Form Tester
   body
      form(action = "/", method = "POST")
         div
            label(for = "say") Say:
            input(name = "say" value = "Hi")
         br
         div
            label(for = "to") To:
            input(name = "to" value = "Express forms")
         br
         button(type = "submit") Send my greetings

Run your server using the following code.

nodemon index.js

Output

Now go to localhost:3000/ and fill the form as you like, and submit. Following response will be shown -

Take a look at your console; it will show you the body of your sent request as JavaScript object as in the following screenshot -

The req.body contains your parsed request body. To use fields from that object, just use them like normal JS objects.

This is the most recommended way to send a request. There are numerous other waysh, but those are not relevant to talk about here, because our Express app is going to handle all those requests in the same way. To read more about various ways to make a request, kindly visit this page.

READ: Express.js | Middleware

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about ExpressJS Database.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.