5

.

5

Submitting input

To this point, we have only addressed how to create an electronic form
and how to check the data that is entered into the form. We will now
look at the final, very important, step of recording the information
from the form.

Most HTML forms have a submit button at the bottom of the form.
Once all of the fields in the form have been filled in, the user
clicks on the submit button to record the form data. The
standard behaviour is to gather all of the data that were entered into the
form and send it to another program to be processed.

The form element has two important attributes
that together control what happens when the submit button is pressed.
The first is the action attribute. This attribute
specifies the program that the form data will be send to. It is
usually a URL, which means that the program to process the data
can reside anywhere on the world-wide web.

The
method attribute of the form element
controls how the information is sent.
The value of this attribute is either "get"
or "post".

The code below shows the opening tag of the form element
for the I-94W form.

<form action="http://www.formbuddy.com/cgi-bin/form.pl" 
      method="post">

The data from the form is sent using the post method and
the data is sent to a program called form.pl. This form
uses a remotely-hosted form processing service called
formbuddy.5.5A number of similar services are provided for free
by various web site.5.6

The problem with using action and method
attributes is that the program specified by the action
needs to be on a web server. Setting up web servers is beyond the
scope of this book, so this section describes an alternative set up
that will allow us to at least demonstrate the recording of form
data using just a web browser.

The following steps can be used to set up a form so that the form data
are recorded locally within the web browser.

1. Add a script element to the head element of the form to
   load the file echo.js containing JavaScript code.

   The
   validate.js code from Section 5.4 should
   also be loaded, so the head element of the HTML code should
   include the following lines:

   <script type="text/javascript" src="validate.js">
   </script>
   <script type="text/javascript" src="echo.js">
   </script>
   

   The file echo.js is available from the same location as
   the file validate.js (i.e., the web site for this book).

2. Add an onsubmit attribute to the form element
   that calls the saveform() function (from the
   echo.js file):

   <form onsubmit="return(saveform())">
   

   With this local submission approach, there is no need for
   an action attribute or a method attribute.

   The call to saveForm()
   replaces the call to the validateAll() function
   from validate.js, but the saveform() function
   calls validateAll() itself, so validation will still occur.

   Each time the form is submitted, the saveform()
   function will save the form data within the
   browser.

3. Add a new button at the bottom of the form using the following code:

   <input type="button" value="export" 
          onclick="echoform()">
   

   This creates a new button, labelled export, in addition
   to the submit button that is already in the form.

   When the new export
   button is clicked, a new browser window will be opened and the
   new window will contain
   all of the form data that has been saved so far. This data can then
   be copied and pasted to a file for permanent storage.

Figure 5.15 shows what the I-94W form
from Figure 5.10 looks like
with these modifications (the only visible difference is the
new export button at the bottom).

Figure 5.16 shows the result of clicking on
the export button after entering several sets of data.

Figure 5.15:
The form in Figure 5.10 set up for local submission.

Figure 5.16:
Exported data from the I-94W form
following a click on the

export

button.

Paul Murrell

This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.