Updating database from JS dynamic table cells

[JohnShell]

Hi,

I am very new to JS. Do not know how to do this.
Have dynamic table with 4 columns. User can add rows - 7 max - and insert data into each cell. First 2 cells use JQuery for calendar - start & end dates. Third cell is select list with 4 values. Fourth cell user inputs number - integer/decimal, like 1.25 or 2.75. Want to be able to update SQL Server db table with user entries. Figure first that the number of added rows - 1, 2, 3...7 - must be recognized then data from each cell in each row must be read then posted. How do I do this?

Code for dynamic table follows:

<script language="Javascript" type="text/javascript">
function addRow()
{
var tbl = document.getElementById('ReqDtTbl');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createElement('input');
textNode.size = 7;
textNode.name = 'startdate' + iteration;
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'enddate' + iteration;
el.id = 'enddate' + iteration;
el.size = 7;
cellRight.appendChild(el);
// the last cell!
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'TypeHrs' + iteration;
sel.options[0] = new Option('-Select-', '""');
sel.options[1] = new Option('Comp Time', 'Comp Time');
sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
sel.options[3] = new Option('Overtime', 'Overtime');
sel.options[4] = new Option('Rel Comp', 'Rel Comp');
cellRightSel.appendChild(sel);
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);
}

Appreciate any effective help. Thanks, John

 

[vacunita]

Not with javascript, well at least the DB update part would be done with whatever server side language your web server supports.

Since JS can't actually access the database directly it requires an intermediary to which it hands over he data, and it performs the update.

With that said, you can have JS gather the data to update either in hidden form fields, or in an array, and either use a form and submit to the server side script the hidden form fields and let that Server side script update the database or use Ajax to call the server side script while submitting the data to be updated to it by means of a post or get array.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[JohnShell]

Thank you,

I worded my question poorly. I am using ColdFusion on the server side and I know that is the means to update the db. W

What I want to do is ensure the data entered into the table's cells is captured so that I can use CF to send it to SQL Server for the updating.

I do not know how to verify the number of added rows and then collect the user entered data based on the added rows. How do I loop through the table cells?

Thanks again.

 

[vacunita]

I guess the easiest way would be to build an array of your rows as you create them and then use that array to get the information.

For instance:

[red]var new_rows=new Array();
var row_count=0;
[/red]
[gray] function addRow()
     {
          var tbl = document.getElementById('ReqDtTbl');
          [red]new_rows[row_count]=new Array();[/red]
          var lastRow = tbl.rows.length;
          var iteration = lastRow;          
          var row = tbl.insertRow(lastRow);
          var cellLeft = row.insertCell(0);
          var textNode = document.createElement('input');          
          textNode.size = 7;
          textNode.name = 'startdate' + iteration;          
          cellLeft.appendChild(textNode);          
          [red]new_rows[row_count]['cell1']=textNode;[/red]
          var cellRight = row.insertCell(1);          
          var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7;         
          [red]new_rows[row_count]['cell2']=el;[/red]
          cellRight.appendChild(el);          
          // the last cell!
          var cellRightSel = row.insertCell(2);          
          var sel = document.createElement('select');          
          sel.name = 'TypeHrs' + iteration;          
          sel.options[0] = new Option('-Select-', '""');
          sel.options[1] = new Option('Comp Time', 'Comp Time');
          sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
          sel.options[3] = new Option('Overtime', 'Overtime');
          sel.options[4] = new Option('Rel Comp', 'Rel Comp');          
          cellRightSel.appendChild(sel);          
          [red]new_rows[row_count]['cell3']=sel;[/red]
          var cellRight = row.insertCell(3);          
          var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'No. of Hours' + iteration;          
          el.id = 'No. of Hours' + iteration;          
          el.size = 7;         
          cellRight.appendChild(el);   
                 	  
          [red]new_rows[row_count]['cell1']=el;
row_count++;[/red]
     }

[/gray]

Basically you build an array of references to your new rows so that when you need to send them to your coldfusion script you can simply loop through the array to get your values.

If you where to do this:

alert(new_rows[1]['cell3'].value);
alert(new_rows[0]['cell1'].value);
[code]
after having filled in the values in your new row, you would get them displayed in the alert. 









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown. 

Behind the Web, Tips and Tricks for Web Development. 
[URL unfurl="true"]http://behindtheweb.blogspot.com/[/URL]

 

[BillyRayPreachersSon]

I do not know how to verify the number of added rows and then collect the user entered data based on the added rows. How do I loop through the table cells?

If the rows contain form elements, and they are within your form, then you will be able to pick up on the elements server-side using CF. Therefore, how to verify the number of rows and how to collect the data is a CF question, not a JS one.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[JohnShell]

Thank you all.

John