Database Form Functions with HTML

From now onward we shall be talking about the JavaScript until we reach the point of talking about Tabular Forms, as I indicated in part one of this series.

The setFirstRow() Function

This is the function that is first called when the web page opens. The function first determines the total number of rows of the Table recordset. It does this with the following statements:

var rowCollection = document.getElementById('Recordset').rows;

numberOfRows = rowCollection.length;

The total number of rows is stored in the variable named numberOfRows.

The function then goes on to copy the six data values of the first row of the recordset to the six text input controls. Note that the –1 data of the last field of the recordset-row is never copied to the form. This value is used to control editing (see later).

It goes on to determine and display the row position (the row number of the recordset shown on the form). After this it displays the numberOfRows (total) of the recordset.

It puts the Input controls into the read-only mode.

Finally, it disables the Show-First and Show-Previous buttons.

This is the code:

function setFirstRow()

{

//determine the total number of rows

var rowCollection = document.getElementById('Recordset').rows;

numberOfRows = rowCollection.length;

//show first row values if the recordset is not empty

if (numberOfRows > 0)

{

for (j=0;j<6;j++)

{

//form the input text control ID

CID = "EI" + j;

//form the recordset ID

RID = "TD0" + j;

document.getElementById(CID).value = document.getElementById(RID).innerHTML;

}

}

//show the data row number (position) and total number of rows

if (numberOfRows > 0)

{//rows exist

document.getElementById('RowPosition').value = index + 1;

}

else

{//there are no rows

document.getElementById('RowPosition').value = 0;

}

document.getElementById('TNumberRows').value = numberOfRows;

makeReadOnlyInputControls();

//disable the showFirstRow and showPreviousRow Buttons

disableButtons('SFA1','SP1');

//if the recordset is empty, disable the showNextRow and showLastRow Buttons as well.

if (numberOfRows == 0)

{

disableButtons('SN1','SL1');

}

}

We continue in the next part of the series.