Hello all,


I wrote a piece of code to dynamically add rows to a table in one of my HTML form which I submit to ASP page for processing.


function addRowToTable1(form)
{
var div1 = document.getElementById('test1');
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow + 1;
var row = tbl.insertRow(lastRow);

// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'vacation_dates';
el.id = 'vacation_dates';
el.size = 30;
cellRight.appendChild(el);

// select cell
var cellRightSel = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'vacation_hours';
el.id = 'vacation_hours';
el.size = 30;
cellRightSel.appendChild(el);
row.appendChild(cellRight);
row.appendChild(cellRightSel);
div1.appendChild(row);

}

Now, this code adds the row to the table dynamically. But the problem lies here:

I have a form and I submit this form to asp page. Even though I add the row, it does not get linked to the form. When the form gets submitted, the value for vacation_dates remain blank.

Obviously, the next logical step was form.appendChild(div1) and it works too but it then appends the table to the top of the form and my formatting goes away.

Is there a way where I can say that the new elements added are linked to a particular form?

Ne ideas??