rsomma
02-03-2009, 03:45 PM
Hello All,
I've been stumped on this one since yesterday and hope someone might have some insights since I can't find anything online about it. I've obtained this script to add rows with form elements dynamically to a table. It works superbly; however, I need to run some javascript form validation on it after adding the rows. The problem is that the existing form elements are returning "Undefined" after the appendChild function is executed on the table.
I've put a simplified version of the script below, with two alerts demonstrating where the ability to access the form element with document.all is lost. I've tried several different methods of accessing the value in these form fields by name, but none seem to work.
I've verified that the name is being set checking the ".name" attribute on the element. I'm stuck with IE for this and need to access the elements by name. Is there an alternative, or is there something wrong with the code? Thanks in advance for any insights anyone has into this.
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function addRow(r)
{
//the root
var root = r.parentNode;
//the rows' collection
var allRows = root.getElementsByTagName('tr');
//the clone of the 1st row
var cRow = allRows[0].cloneNode(true)
//the inputs' collection of the 1st row
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++)
{
//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
//change the selecet's name
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
//appends the cloned row as a new row
alert(document.all("textfield_a").value + " textfield_a before appendchild");
root.appendChild(cRow);
alert(document.all("textfield_a").value + " textfield_a after appendchild");
}
</script>
</head>
<body>
<form action="" method="get">
<table width="766" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="191"><input type="text" name="textfield_a" /></td>
<td width="191"><input type="text" name="textfield_b" /></td>
<td width="98"><select name="select">
<option value="item1" selected="selected">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>
</select></td>
<td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
</tr>
</table
</form>
</body>
</html>
I've been stumped on this one since yesterday and hope someone might have some insights since I can't find anything online about it. I've obtained this script to add rows with form elements dynamically to a table. It works superbly; however, I need to run some javascript form validation on it after adding the rows. The problem is that the existing form elements are returning "Undefined" after the appendChild function is executed on the table.
I've put a simplified version of the script below, with two alerts demonstrating where the ability to access the form element with document.all is lost. I've tried several different methods of accessing the value in these form fields by name, but none seem to work.
I've verified that the name is being set checking the ".name" attribute on the element. I'm stuck with IE for this and need to access the elements by name. Is there an alternative, or is there something wrong with the code? Thanks in advance for any insights anyone has into this.
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function addRow(r)
{
//the root
var root = r.parentNode;
//the rows' collection
var allRows = root.getElementsByTagName('tr');
//the clone of the 1st row
var cRow = allRows[0].cloneNode(true)
//the inputs' collection of the 1st row
var cInp = cRow.getElementsByTagName('input');
for(var i=0;i<cInp.length;i++)
{
//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
//change the selecet's name
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));
//appends the cloned row as a new row
alert(document.all("textfield_a").value + " textfield_a before appendchild");
root.appendChild(cRow);
alert(document.all("textfield_a").value + " textfield_a after appendchild");
}
</script>
</head>
<body>
<form action="" method="get">
<table width="766" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="191"><input type="text" name="textfield_a" /></td>
<td width="191"><input type="text" name="textfield_b" /></td>
<td width="98"><select name="select">
<option value="item1" selected="selected">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>
</select></td>
<td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
</tr>
</table
</form>
</body>
</html>