Home arrow HTML arrow Edit and Other Database Form Functions with HTML

Edit and Other Database Form Functions with HTML

This is the fifth part of a thirteen part series covering how to build database forms with HTML. We will start with a couple of edit functions and the deleteRow() function. Then we will go over the function that ties them all together and the function that completes the execution.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
August 06, 2008
  1. · Edit and Other Database Form Functions with HTML
  2. · The deleteRow() Function
  3. · The includeInTransmittedTable(Decision) Function
  4. · The finalize(ID) Function

print this article

Edit and Other Database Form Functions with HTML
(Page 1 of 4 )

When you click the Edit button, the editRow() function is called.

The editRow() Function

It starts by assigning the global editMode variable to true. It disables these buttons: Edit, Delete, Clear, Find, and Sort. It is not proper for these buttons to be enabled when you are in the Edit mode. This way the programmer protects the user from corrupting his own data. This also makes use of the form convenient. The code then frees the text Input controls for writing (typing). This is the code:

function editRow()


editMode = true;


//disable the buttons, Edit, Delete, Clear, Find, Sort.



//make input controls write-able



Note: It is not the editRow() function that edits the record in the recordset. When you have finished typing (modifying) the Input control fields, an event has to be triggered before the corresponding record in the recordset can be edited with the modified values in the Input controls.

The editRowToRecordset() Function

When you have finished modifying the Input control fields, the next thing you have to do is click any button that is enabled. After you have finished modifying the Input controls, the editMode variable is still true. When any of these buttons are clicked, their corresponding functions begin by checking if you were in the Edit mode (i.e. if editMode = true). If it is true, it calls our editRowToRecordset() function.

The editRowToRecordset() function changes the data in the corresponding row of the recordset and calls the “includeInTransmittedTable('EDITED')” function. The includeInTransmittedTable() function makes a copy of the edited row in the Transmitted Table. The value “EDITED” is passed. As I said, this value will be the last piece of data in the copied row of the Transmitted Table. At the server, the program-file that receives the processed rows will use this data to know that this was an edited row. This is the code for the editRowToRecordset() function:

function editRowToRecordset()


//change the data values for the recordset

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


//form the input text control ID

ID = "EI" + j;


document.getElementById('Recordset').rows[index].cells[j].innerHTML = document.getElementById(ID).value;




blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


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