Edit and Other Database Form Functions with HTML

This is a delicate function. If you make a mistake in this function, it will be difficult to correct. Remember that the three important things to do to a database table (or recordset) are to Add a Row, Edit a Row, or Delete a row. This function has to include copies of the added, edited, and deleted row of the recordset in the Transmitted Table. This function is called by the addRowToRecordset(), editRowToRecordset(), and deleteRow() functions.

The main role of our includeInTransmittedTable(Decision) function is to make a copy of any row added, edited, or deleted in the recordset for the Transmitted Table. Each table cell of the Transmitted Table has the HTML INPUT element as its immediate descendant. It is the Input element that holds the data for the database. When the submit button is clicked, the name/value pairs of each Input element are sent to the server automatically. The browser takes care of the sending function, so we do not have to write any code for that. With traditional database programming, the database interface API takes care of this function. Please, note the similarity.

The includeInTransmittedTable(Decision) function takes an argument that is either “ADDED,” ”EDITED,” or ”DELETED.” As I mentioned above, this value is the last piece of data in each row of the Transmitted Table. There are “if” statements that depend on the values ”EDITED” and ”DELETED.” The function does not have any special behavior when the argument is “ADDED.”

Remember that the data at the end of each row in the recordset is –1. When the argument is “EDITED,” the includeInTransmittedTable(Decision) function makes a copy of the edited row from the recordset for the Transmitted Table. It then replaces the “-1” in the row of the recordset with the index of the copied row in the Transmitted Table. In case the user edits the same row again in the recordset it will use this value to overwrite that particular row in the Transmitted Table. So if the user edits a row in the recordset more than once, we should always have one copy of the edited row in the Transmitted Table. In other words, each time he edits the row in the recordset again, our function should also replace the copied row in the Transmitted Table with a new row.

Our function uses a global variable, called indexTT, for the index of the Transmitted Table. To understand the function, you need to have basic knowledge of HTML DOM objects. This is the code of the function:

function includeInTransmittedTable(Decision)

{

var recordsetRowNo = numberOfRows - 1;

var check = -1; //to check if recordset row has already been edited.

var oldIndexTT;

//When Desicion is EDITED first check if the recordset row has already been edited.

if (Decision == "EDITED")

{

recordsetRowNo = index;

check = document.getElementById('Recordset').rows[index].cells[6].innerHTML;

if (check != -1)

{//row has been edited

recordsetRowNo = index;

oldIndexTT = indexTT;

indexTT = check;

}

}

//When Desicion is DELETED

if (Decision == "DELETED")

{

recordsetRowNo = index;

}

//insert a blank row if no editing has taken place in the recordset row concerned

if (check == -1)

{

document.getElementById('TransmittedTable').insertRow(indexTT);

}

//insert blank cells and give them the corresponding data of the row you

//have processed from the recordset.

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

{

//insert blank cells if no editing has taken place in the recordset row concerned

if (check == -1)

{

document.getElementById('TransmittedTable').rows[indexTT].insertCell(j);

}

//form the name of the transmitted INPUT element

tName = "T" + indexTT + j;

document.getElementById('TransmittedTable').rows[indexTT].cells[j].innerHTML = '<input type="text" ' + 'name=' + tName + ' value="'

+ document.getElementById('Recordset').rows[recordsetRowNo].cells[j].innerHTML

+ '">';

}

//insert additional cell and the content ADDED, DELETED or UPDATED accordingly

if (check == -1)

{

document.getElementById('TransmittedTable').rows[indexTT].insertCell(6);

document.getElementById('TransmittedTable').rows[indexTT].cells[6].innerHTML = '<input type="text" ' + 'name=' + 'T' + indexTT + '6' + ' value="' + Decision + '">';

}

if (check == -1)

{//you had not already edited the recordset row.

//if you are editing for the first time

if (Decision == "EDITED")

{

document.getElementById('Recordset').rows[index].cells[6].innerHTML = indexTT;

}

//The next row index for the Transmitted table is

indexTT+=1;

}

else

{//you had already edited the recordset row so give back the normal indexTT value.

indexTT = oldIndexTT;

}

}