Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

386 CHAPTER 8 Websites and services

The modified <form> element should look like the following.

<form name="ContactForm" method="post" action="/ContactMessage">

18. Stop and start the website and then open the browser and navigate to the ContactUs.
    html page. Be sure to refresh the cache by pressing Ctrl+F5.


19. Enter data into the form and click the Submit button.
    You should see the response in the browser window, as shown in Figure 8-14.

FIGURE 8-14 he processed formT

Wouldn’t it be nice to put the message on the page without repainting the page?

Exercise 2: Create a web service to receive data

In this exercise, you modify the existing website from Exercise 1 by adding a web service to

accept the data and return a response that is displayed on the ContactUs.html page.

1. Stop running Node.js if it’s running.


2. Open the index.js file. Create a copy of the app.post() function that you created in
   Exercise 1. Modify the copy so that it will be the web service and accessible by using
   the /ContactService-relative URL. Modify the code so that a JSON object is returned
   with a result property that contains the same message that was on the webpage
   response from Exercise 1. Modify the message logged to the console so that you can
   tell the difference between handling a page postback and a web service post.
   The completed index.js file should look like the following.
   var express = require('express');
   var app = express();
   var formidable = require('formidable');

app.use(express.static(__dirname + '/WebCalculatorSolution/WebCalculator'));

app.get('/', function (request, response) {

response.redirect('default.html');