a blog for those who code

Monday 28 March 2016

Getting Started with Form in Node.js

In this post we will be discussing about forms in Node.js. Web Applications have to handle forms so that user can enter data that need to be processed. Node.js does not provide any option to handle form data by itself but there are lot of third party modules which will help us to process form data.

We will be using Formidable module module to process form form fields. Formidable is a Node.js Module for parsing form data, especially file uploads.


At first we will create an html file which will display form data to the user as shown below.

<html>
 <body>
  <form action="" method="post" enctype="multipart/form-data">
   <fieldset>
    <label for="loginname">Login Name : </label>
    <input type="text" id="loginname" name="name" placeholder="Enter Login Name" />
    <br/>
    <label for="email">Email : </label>
    <input type="email" id="email" name="email" placeholder="Enter Email" />
    <br/>
    <input type="submit" value="submit record" />
   </fieldset>
  </form>
 </body>
</html>

Next we will write our Server.js which will be creating an HTTP server for displaying the above html file.

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, res) {
  fs.readFile('formData.html', function(err, data) {
    res.writeHead(200, {
      'Content-Type' : 'text/html',
      'Content-Length' : data.length
    });
    res.write(data);
    res.end();
  });
})
server.listen(5000);

When you run the above code using node server.js and hit http://localhost:5000 you will get something like below


Now we will write the code to parse the form data when submitted. At first we will install latest version of formidable using the command npm install formidable@latest. Now we will change our server.js file to handle the post of text fields.

var http = require('http');
var fs = require('fs');
var formidable = require('formidable');
var util =require('util');

var server = http.createServer(function (req, res) {
 if(req.method.toLowerCase() === 'post') {
  var form = new formidable.IncomingForm();
  form.parse(req, function(err, values) {
   res.writeHead(200, {'content-type' : 'text/plain'});
   res.write('Values Submitted\n\n');
   res.end(util.inspect({values : values}));
   console.log(values);
  });
  return;
 }
 fs.readFile('formData.html', function(err, data) {
  res.writeHead(200, {
   'Content-Type' : 'text/html',
   'Content-Length' : data.length
  });
  res.write(data);
  res.end();
 });
})
server.listen(5000);

In the above code at first we are checking that the Request Method is Post or not, and if it is post we are parsing the Form data. Here we are not storing the form data anywhere, but you can store the data in your data store. Now when you run the above code and submit anything you will get the output as shown below ;


Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment