Form Handling with Express

Dr. Greg Bernstein

Checked October 15th, 2019

Forms & Express

Reference

Get or Post?

<form action="url" method="post or get">

  • get: Form information is encoded into a query string that is appended to the URL when the browser issues the request.

  • post: Form information is encoded into the request body.

get Form Handling

Basic Ingredients

  • Need to serve up an HTML page that contains a form.
    • We’ll use a static page
  • Need to set up Express “route” to handle the form

  • Need to extract parameters from the query string

Form Page

From simpleGetForm.html in the /public directory

<form action="/simple_form_handling" method="get">
    <fieldset>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="user_name">
        </div>
        <div>
            <label for="mail">E-mail:</label>
            <input type="email" id="mail" name="user_mail">
        </div>
        <div>
            <label for="msg">Message:</label>
            <textarea id="msg" name="user_message"></textarea>
        </div>
        <div><button type="submit">Send your message</button></div>
    </fieldset>
</form>

Express Route Handler

From file simpleGetFormHandler.js:

var express = require('express');
var app = express();
app.use(express.static('public')); // For static assets
const nunjucks = require('nunjucks');
nunjucks.configure('templates', {autoescape: true, express: app});

// Respond to get request from form page.
app.get('/simple_form_handling', function(req, res) {
    let info = req.query;
    res.render('simpleGetResponse.html', info);
});

host = '127.0.0.1';
port = '5555';
app.listen(port, host, function () {
    console.log("simpleGetFormHandler.js app on IPv4: " + host + ":" + port);
});

Template for Response

<!DOCTYPE html>
<html lang="en">
    <head><meta charset="utf-8">
        <title>Get Form Handler Example</title>
        <link rel="stylesheet" href="bottleMessage.css">
    </head>
    <body>
        <div class="message">
            <h3>Message for <em>{{user_name}}</em></h3>
            <p>{{user_message}}</p>
        </div>
    </body>
</html>

Running It…

After Submission…

Fun Background Patterns

See Websites to Generate SVG Patterns

post Form Handling

References

Basic Ingredients

  • Need to serve up an HTML page that contains a form with post method.
    • We’ll use a static page
  • Need to set up Express “route” to handle the form (post)

  • Need to extract parameters from the request body

Request Body

HTTP request messages can contain a body. These can be formated/encoded in many different ways. We will need help parsing the application/x-www-form-urlencoded content type.

express.urlencoded

  • We’ll use the express.urlencoded method to parse the request body for us.

  • Note that other body parsing middleware is available for Express on NPM.

Form for post

see file public/simplePostForm.html

<form action="/simple_form_handling" method="post">
        <fieldset>
            <div>
                <label for="name">Name:</label>
                <input type="text" id="name" name="user_name">
            </div>
            <div>
                <label for="mail">E-mail:</label>
                <input type="email" id="mail" name="user_mail">
            </div>
            <div>
                <label for="msg">Message:</label>
                <textarea id="msg" name="user_message"></textarea>
            </div>
            <div><button type="submit">Send your message</button></div>
        </fieldset>
    </form>

Form screenshot

Express Post Route Handler

const express = require('express');
let app = express();
app.use(express.static('public')); // For static assets
let urlencodedParser = express.urlencoded({extended: true});

// Respond to post request from form page.
app.post('/simple_form_handling', urlencodedParser, function(req, res) {
    console.log(req.body);
    //res.send(req.body);
    res.send(createHtmlMessage(req.body));
});

function createHtmlMessage(info) {
    let begining =
`<!DOCTYPE html>
<html lang="en">
    <head><meta charset="utf-8">
        <title>Put Form Handler Example</title>
        <link rel="stylesheet" href="bottleMessage.css">
    </head><body><div class="message">`,
        end = `</div></body></html>`;
    let content = `<h3>Message for <em>${info.user_name}</em></h3>`;
    content += `<p>${info.user_message}</p>`;
    return begining + content + end;
}

const host = '127.0.0.1';
const port = '5555';
app.listen(port, host, function () {
    console.log("simpleFormHandler.js app listening on IPv4: " + host +
    ":" + port);
});

Routes with multiple callbacks

From Express Router

router.METHOD(path, [callback, ...] callback)

You can provide multiple callbacks, and all are treated equally, and behave just like middleware…

In our case we put the urlencodedParser into the list of callbacks so it will process the body before our callback gets the request.

Response screenshot