Edit and Other Database Form Functions with HTML - The finalize(ID) Function
(Page 4 of 4 )
When you click the Save or Done button, this function is called. These are the lines for the Save and Done buttons:
<button type="button" id="S1" onclick="finalize('S1')"> Save </button>
<button type="submit" id="Sa1" style="display:none"> Save </button>
<button type="button" id="Do1" onclick="finalize('Do1')"> Done </button>
<button type="submit" id="Don1" style="display:none"> Done </button>
Look at the lines closely. The Save button has two lines and the Done button also has two lines. As I said, we shall be giving our own interpretation to Internet Specifications and Protocols. There are two Save buttons and there are two Done buttons. The Save button that you see on the form is not a submit button, as you might expect. It is an ordinary button with the onclick event. The submit Save button is not displayed, it is given the “display:none” style property. The Done button that you see on the form is not a submit button either. It is an ordinary button with the onclick event. The submit Done button is not displayed. Instead, it is given the “display:none” style property.
Now when you click either the Save button or the Done button, the function finalize(ID) is called from either of their onclick events. This function receives an argument that is either the ID for the Save button or the ID for the Done button.
The finalize(ID) function first checks if you were in the Add mode. If you were there, it completes the Add process. It then checks if you were in the Edit mode. If you were there, it completes the Edit process.
The HTML DOM submit object has the “click()” method. The finalize(ID) function then goes on to check whether it was the displayed Done button that triggered the onclick event. If it was, it submits the form with the statement:
document.getElementById('Don1').click();
Here, Don1 is the ID of the submit Done button that has the display:none style property. After this, it closes the window with the statement
self.close();
If the Done button did not trigger the onclick event, then it was the displayed Save button. Only these two can have the finalize(ID) function executed. In this case, it simply submits the form with the statement:
document.getElementById('Sa1').click();
Here, Sa1 is the ID for the submit Done button that has the display:none style property.
We have indirectly used the submit buttons. This is the code for the function:
function finalize(ID)
{
//add to recordset any data that might have been included in the controls
if (addMode == true)
{
addRowToRecordset();
//after adding, you must go out of the addMode, so reset the addMode variable
addMode = false;
makeReadOnlyInputControls();
//enable the buttons that were disabled in the Add process
enableButtons('E1','D1','F1','So1');
}
//edit any row of the recordset that might have been edited at the form
if (editMode == true)
{
editRowToRecordset();
//after adding, you must go out of the editMode, so reset the editMode variable
editMode = false;
makeReadOnlyInputControls();
//enable the buttons, Edit, Delete, Clear, Find, Sort.
enableButtons('E1','D1','C1','F1','So1');
}
//close the window after submit if the Done button was clicked
if (ID == "Do1")
{
document.getElementById('Don1').click();
self.close();
}
else
{
document.getElementById('Sa1').click();
}
}
In the next chapter, we shall see how to sort and find data (rows) of the recordset.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
