Forms

Sending Data

For now, we have two options (methods) of sending data to the server. What are they, and how do they send their data? →

• GET - data is in the query string
• POST - data is in the request body

Note that POST is not any more secure than GET ….

• since someone eavesdropping on your request can still see all parts of it (including the body, as long as it's not over HTTPS)
• (though… can you think of a way that spills info in your GET request, that won't happen in POSTs? →)
• your browser's history, or bookmarking!

Sending Data

So far… we know two ways that the user can make a browser send a request to the server: →

• entering it in the URL bar
• or submitting in through a form

Let's see how form submission works. →

Creating a Form That Sends Data

To create a form that sends data, you'll need to:

• create the actual form in your mark-up
  • form fields (like input, type=text)
  • something to tell the browser to send the form (like a submit button)
• routes in your app to handle:
  • GETing the original form at some path
  • POSTing (or __GET__ing) the form to a path
  • optionally, GET after submission

Creating the HTML Form

An HTML form element has the following attributes:

• method - the method of the request… GET or POST
  • generally use POST for creating new (or even modifying) resources/pages/content (add, modify or delete data, for example)
  • generally use GET for retrieving resources/pages/content (search or filter, for example)
• action - the URL that your browser will send data to

Your form's fields have the following attributes:

• name - the name of the specific value you're sending over
• value - (optionally) set the default value of this field

In Your Application

To handle data in the request body, you'll need to:

• make sure you've used npm to install body-parser
• require body-parser
• add the appropriate routes… what will they be? →
  • you'll need an app.get to handle requesting the original form
  • and a route to handle the post (the route handling the POST can use request.body.property-name)
  • you may want another route for a success page, or send back to the original form

Using the Body Parser Middleware

Again, the body of a POST is likely to be encoded and compressed, so to parse out the data and add it to the request object, use the body-parser middleware:

const bodyParser = require('body-parser');

// only handle urlencoded data...
// extended: false specifies that incoming values will be treated as strings
// or arrays
app.use(bodyParser.urlencoded({ extended: false }));

A Very Simple Example

Here's an example that takes a name entered by the user… and displays it on the page directly. In your app.js… →

(some setup)

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.set('view engine', 'hbs');

app.use(bodyParser.urlencoded({ extended: false }));

// this is middleware to log method and path

app.use(function(req, res, next) {
	console.log(req.method, req.path);
	next();
});

Example Continued

We'll create a global variable to store our data. Definitely not conventional; we'll use real data stores later.

// oops, a global... ok for now...
const myName = '';

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

app.post('/', function(req, res) {
	console.log(req.body);
	// change the global
	myName = req.body.myName;
	res.redirect('/');
});

app.listen(8080);

And our View

In simple-form.handlebars

Current value of "myName": {{myName}}

Enter your name: 

Some Other Exercises

keeping track of cat names (from our previous demo)

• display a list of cat names
• have a form that allows you to add a cat name
• a global Array of names is useful for this

a mad libs form…

• display lyrics to your favorite song
• replace 4 words by words submitted through a form

a number guessing game…

• your app keeps a secret number
• your form will submit a number…
  • if it matches the secret number redirect to a win page
  • if it doesn't match, get the form again for another chance to guess