View Full Version : Losing document.all access after appendChild

02-03-2009, 04: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)
var cSel = cRow.getElementsByTagName('select')[0];
//change the selecet's name
//appends the cloned row as a new row
alert(document.all("textfield_a").value + " textfield_a before appendchild");
alert(document.all("textfield_a").value + " textfield_a after appendchild");
<form action="" method="get">
<table width="766" border="0" cellspacing="0" cellpadding="0">
<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>

<td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>

02-04-2009, 01:33 AM
You SHOULD NOT be using document.all! Forget that it exists.

You SHOULD be using document.forms[0].elements["elementName"] to reference form elements or document.getElementById("elementId")


02-04-2009, 03:57 PM
Thank you very much. I'm an old-school JS programmer, and we're in the process of updating an old application. What you've just told me synchs with some other things I read yesterday. I'll adjust my paradigm accordingly. : )

Thanks again!

02-04-2009, 04:11 PM
I was able to get my code working using the getElementId(); however, the:


still returns undefined. Looping through all the elements in the table shows that the field and its value are still there, they simply cannot be referenced by name after the appendChild() function. This is sort of a bug to my mind, but other articles I've read say that all form elements should have both "name" and "id" attributes, "id" for javascript to reference and "name" for server-side scripts to access their values.

Once again, adjusting my antiquated paradigms accordingly. :)