This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
It is possible to specify script code that should be run when the user interacts with the electronic form. The most common language used for scripts is JavaScript (commonly known as JavaScript or JScript).
JavaScript code can be included as the content of a script element in the head of the HTML code, or the JavaScript can be in a separate file and just referred to via a script element.
This section does not provide a reference for the JavaScript language (see Section 6.5); it is only a guide to the use of some predefined scripts that are made available with this book.
The file validate.js contains JavaScript code for performing simple checks on the values entered for text fields. These functions can be used by adding an onblur attribute to the element to be checked, so that the code is run whenever the user interacts with that element. Typically, these will only be necessary with text elements or textarea elements.
In all cases, these functions will open a dialog containing an error message if the check fails. The user must click on OK in the dialog in order to continue and the content of the offending element will be highlighted when control returns to the form (i.e., no other data can be entered until the element has a valid value).
Surname <text onblur="notEmpty(this)">
The file validate.js contains an JavaScript function called validateAll(). This script function can be used to check all form elements that have onblur attributes just before the form is submitted. The effect is to force all validation checks to be performed when the form is submitted and submission will not proceed if any of the checks fail. This should be added as the onsubmit attribute of the form element as shown below:
<form onsubmit="return(validateAll())">
The file echo.js contains JavaScript functions for performing “local” submission of form data. This means that, when the submit button is clicked, the data is not sent to an external program for processing, but is saved within the browser instead.
In order to perform local submission, the saveform() function should be added to the onsubmit attribute of the form element as shown below:
<form onsubmit="return(saveform())">
In addition, an extra button should be added to the form using the code shown below (the echoform() function is provided within echo.js):
<button onclick="echoform()">export</button>
When this button is clicked, a new browser window will be opened containing all of the data submitted so far. The data can then be copied and pasted elsewhere for permanent storage.
Navigation away from the form page (or closing the browser), without clicking the export button, will result in the loss of all of the submitted form data.
The saveform() function calls the validateAll() function from validate.js to perform validation checks before saving the form data within the browser.
The functions in echo.js behave differently, depending on the value of certain parameters. For example, the format in which the form data is stored is controlled by a parameter called echoFormFormat. The parameters all have default values, but new values can be specified by including hidden elements in the HTML form (see Section 6.2.2).
An example is shown on line 51 of Figure 6.2 (reproduced below):
<input type="hidden" id="echoFormFormat" value="html">
This code sets the echoFormFormat parameter to the value "html", which means that the form data are stored as an HTML table. This parameter can also take the value "text", in which case the data are stored in a plain text format (see Section 7.5).
Other possible parameters and their values are:
The default values for these parameters mean that the default plain text format is a CSV format (see Section 7.5.5).
Paul Murrell
This document is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.