Database Form Functions with HTML

When you click the Edit button, to set the form into the edit-mode, the text input controls are freed for you to type. The Edit, Delete, Clear, Find and Sort buttons are disabled. It does not make sense for you to delete, find or sort, while in the edit-mode. It also does not make sense for you to click the Edit button while in the edit-mode.

After you have just finished typing, the corresponding row in the recordset cannot be automatically changed or the changed copy automatically created in the Transmitted Table. An event has to be triggered before this can happen. It is up to us to decide what event should be triggered.

For this, I decided that if any of the enabled buttons is clicked, the text input controls should be made read-only, the corresponding row in the recordset changed, and a copy of the changed row should be added to the Transmitted Table. Then any button that was disabled, because the Edit button was clicked, is enabled. This action ends the edit process.

The Delete Operation

If you are not in the Add or Edit mode, you can delete any row by clicking the Delete button. When you do that, a copy of the row is first created in the Transmitted Table, then at the recordset, the first six fields of the row are given the value “DELETED.” The fields of the text Input controls are also given the value “DELETED.” When the user navigates to this row he should see “DELETED” as the field data.

Recall that it is the content of the Transmitted Table that is sent to the server. At the end of each row in the Transmitted Table is the word ADDED, EDITED or DELETED, to indicate what happened in the row in the recordset. The program file at the server will then affect the database accordingly.

The Clear Operation

The clear operation clears the fields of the text Input controls. It does not delete any row in the recordset or Transmitted Table. The clear operation is only allowed in the add-mode for you to erase all of what you have just typed.

The Save Operation

Note that you can click the Save button after you have just finished typing while in the Add or Edit mode. The Save operation first verifies that you were in the add-mode. If you were, it completes the Add process. It also verifies that you were in the Edit mode. If you were, it completes the Edit process. It then sends the content of the Transmitted Table to the server.

The Done Operation

When you click the Done button, you go into the Done process. The Done operation does what the Save operation does, and then closes the browser window.

Find and Sort Operations

These operations were explained in the first part of this series. However, note here that neither of them can occur in the Add or Edit mode.

More on the Transmitted Table

The content of an HTML TABLE CELL cannot be sent to the server when the Submit button of the HTML FORM element is clicked. So, each Table Cell of the Transmitted Table has an HTML INPUT element. It is the name/value pair of each of these INPUT elements that is sent to the server.

Important Variables

The recordset is a program language container, and like all such containers, its value can be accessed with an index. So there is a global variable in our JavaScript code, called index.

We always have to know the total number of rows of the recordset; the global variable called numberOfRows is used for this.

Index values always begin from zero upward, and not from 1 upward. However, in order to indicate the row position we have to use values from 1 upward, to satisfy the user. So, to obtain the row position, we always have to add 1 to the value of the index. Also, the maximum index value is (numberOfRows - 1).

We use the global variable named addMode to indicate that the form is in the add-mode. In this mode,

AddMode = true;

Out of the add-mode,

AddMode = false; //the default

We use the global variable named editMode to indicate that the form is in the edit-mode. In this mode,

editMode = true;

Out of the edit-mode,

editMode = false; //the default