Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Losing document.all access after appendChild

    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>

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 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]

  • #3
    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!

  • #4
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •