Building Single Row Database Forms with HTML

The recordset is a TABLE element with a style property of display:none. This table is at the bottom of the web page just before the end tag (</body>) of the BODY element. The field value of a row is the content of the TD element. It is good to design a web page so that elements are rendered (displayed) as they arrive at the browser. In our case, we need to see the form first before we see the values of the form fields or do anything with the recordset. That is why the recordset table is at the bottom of the web page.

The word “field” in this context can mean two things. It can mean a cell in a row of the recordset or it can mean the rectangle of the HTML INPUT element that receives the text you type.

There are seven fields (TD elements) in each row of the recordset. The first field in the row corresponds to the top-most Input element of the form. The next field corresponds to the second top-most Input element of the form, and so on until the sixth corresponding field. The last field of the row is not displayed on the form. This field is used to indicate whether its particular row in the recordset has been edited. Any row (record) that has not been edited has a value of –1 for this field. When a row of the recordset is edited, its value for this field becomes the row number of its copied row in the Transmitted Table. We shall see the reasons for this later.

Common Functions

All the code (JavaScript) that manipulates the form is in the web page. There are some functions that are used by other functions. These are common functions. I start by explaining these first.

Activating and Deactivating the INPUT Controls

When the form is first displayed, the text input fields are read-only. So you cannot change the content by simply clicking it with the mouse pointer and typing.

The makeReadOnlyInputControls() Function

This function makes all the text Input controls read-only. The code is:

function makeReadOnlyInputControls()

{

for (j=0;j<6;j++) //there are 6 input text controls

{

//form the control ID

ID = "EI" + j;

document.getElementById(ID).readOnly=true;

}

}

There are six text Input elements with IDs: EI0, EI1, EI2, EI3, EI4, EI5, and EI6. The above function gets these IDs for the six Input elements with the following statement:

ID = "EI" + j;

Many other functions use this technique, so I will not explain it again in order to save time. Every other thing in the function is self-explanatory.

The makeWriteInputControls() Function

Before you can type anything into the Input elements, this function has to be called so that the text controls can be made to receive text. The code is:

function makeWriteInputControls()

{

for (j=0;j<6;j++) //there are 6 input text controls

{

//form the control ID

ID = "EI" + j;

document.getElementById(ID).readOnly=false;

}

}