Home arrow HTML arrow Page 5 - More Database Form Functions with HTML
HTML

More Database Form Functions with HTML


This is the fourth chapter of a thirteen part series regarding the creation of database forms with HTML. In this article we will continue discussing the functions relevant to the development process, including showNextRow(), showLastRow(), showFirstRow(), addRow(), and addRowToRecordset(). Join us as we edge toward completion.

Author Info:
By: Chrysanthus Forcha
Rating: 3 stars3 stars3 stars3 stars3 stars / 4
July 30, 2008
TABLE OF CONTENTS:
  1. · More Database Form Functions with HTML
  2. · The showPreviousRow() Function
  3. · The showLastRow() Function
  4. · The showFirstRow() Function
  5. · The addRow() function
  6. · The addRowToRecordset() Function

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
More Database Form Functions with HTML - The addRow() function
(Page 5 of 6 )

The addRow() function puts the form into the add-mode. It clears the text Input controls. It disables the following buttons: Edit, Delete, Find, and Sort. It increments the variable for the total number of rows. The new row will be added at the end of the recordset. So the total number of rows, including the one being added is equal to the new row’s position (last in recordset). These numbers (position and total) are displayed at the top-right area of the form. Lastly, the function frees the Input controls for typing.

Note: it is not the addRow() function that adds the row to the recordset or the Transmitted Table. As I said above, clicking any of the enabled buttons triggers that.

After you complete typing the row values in the form, you may wish to type in another row. This means that you have to click the Add button again. If you do this, it means the addRow() function has to complete the adding process by sending the data of the first added row on the form to the recordset and Transmission table. So before the addRow() function does anything, it first checks if you are to add another row (you have clicked the Add button again) just after adding a previous one. It does this by verifying whether the addMode variable is true. If it is, the function completes the Add process. In the completion process, it calls relevant functions and then resets the addMode variable to false.

It is possible that you might come to the add-mode (i.e. click the Add button just after typing in information in the edit-mode). So the addRow() function, at the beginning, checks if the edit-mode variable is true. If it is, the function completes the Edit process and resets the editMode variable to true.

After making the above two verifications, the addRow() function proceeds in its normal fashon. This is the code:


function addRow()

{

//adding 2nd, 3rd or more times, i.e. addMode is already true

if (addMode == true)

{

addRowToRecordset();

//after adding, you must go out of the addMode, so reset the addMode variable

addMode = false;

makeReadOnlyInputControls();

}

 

//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');

}

 

addMode = true;

clearControls();


//disable the buttons, Edit, Delete, Find and Sort

disableButtons('E1','D1','F1','So1');

 

//increment the total number of rows variable

numberOfRows+=1;

 

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

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

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

 

//make input controls write-able

makeWriteInputControls();

}



blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials