Losing document.all access after appendChild

rsomma · 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.

Code:

<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>

A1ien51 · 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")

Eric

rsomma · 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!

rsomma · 02-04-2009, 04:11 PM

I was able to get my code working using the getElementId(); however, the:

document.forms[0].elements["textfield_a"].value

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.

02-04-2009, 01:33 AM	PM User \| #2
A1ien51 Senior Coder Join Date: Jun 2002 Location: Between DC and Baltimore In a Cave Posts: 2,640 Thanks: 0 Thanked 89 Times in 84 Posts	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") Eric __________________ Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

02-04-2009, 03:57 PM	PM User \| #3
rsomma New Coder Join Date: Feb 2009 Posts: 12 Thanks: 1 Thanked 0 Times in 0 Posts	Thanks! 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	PM User \| #4
rsomma New Coder Join Date: Feb 2009 Posts: 12 Thanks: 1 Thanked 0 Times in 0 Posts	One Note I was able to get my code working using the getElementId(); however, the: document.forms[0].elements["textfield_a"].value 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.

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread: