Javascript: Can't find newly added form inputs in the DOM

I can only assume I'm doing something wrong, because when I step through the javascript it can't find the object at all.

What I'm trying to do is dynamically add rows of combo boxes to the table. The combo box code is more-or-less irrelevant, because trying to find the newly-generated inputs in the DOM by going through the form doesn't seem to work. I'm not sure if they even exist.

First, I have the form itself:

<form name="WEB070EDIT" action="WEB070" method="POST">

Then lower, there's the table that will contain the generated cells:

<table id='Form2Section2' width="100%" border=0 cellspacing=0 cellpadding=2>
<tr class="woborder">
<th >5. Material or Process Name</th>
<th >6. Specification Number</th>
<th >7. Code</th>
<th >8. Special Process Supplier Code</th>
<th >9. Customer Approval Verification</th>
<th >10. Certificate of Conformance Number</th>
</tr>
</table>

A bit above, there is my heinous script function that populates the table:

<script type="text/javascript">
function addForm1(itemId)
{
 if (typeof addForm1.counter == 'undefined') {
 addForm1.counter = 1;
 }
 var object = document.getElementById(itemId);
 var curRow = object.insertRow(-1);
 curRow.className = "woborder";
 curRow.style.backgroundColor = "#D0D0D0";
 var curCell = curRow.insertCell(-1);

 var cellElem = document.createElement("text");
 cellElem.size = 25
 cellElem.value = ""
 cellElem.name = "V_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "V_P2_MATERIAL_"+ addForm1.counter;

 var newAttr = document.createAttribute("onKeyUp");
 newAttr.nodeValue = "...[some lengthy script stuff trimmed for readability]...";
 cellElem.setAttributeNode(newAttr);

 curCell.appendChild(cellElem);

 curCell.appendChild(document.createElement("br"));

 cellElem = document.createElement("hidden");
 cellElem.name = "P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "P2_MATERIAL_" + addForm1.counter;
 cellElem.value = "";

 curCell.appendChild(cellElem);

 cellEle开发者_如何学Pythonm = document.createElement("select");
 cellElem.name = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.id = "MYSELECT_P2_MATERIAL_" + addForm1.counter;
 cellElem.size = 10;

 newAttr = document.createAttribute("onClick");
 newAttr.nodeValue = "...[more script stuff here we don't care about]...";

 eval("document.getElementById('V_P2_MATERIAL_" + addForm1.counter + "').focus();");
 eval("combohandleKeyUp('WEB070EDIT','MYSELECT_P2_MATERIAL_" + addForm1.counter + "','V_P2_MATERIAL_" + addForm1.counter + "','P2_MATERIAL_" + addForm1.counter + "',MYLIST_P2_MATERIAL,MYDESCLIST_P2_MATERIAL,9999999);");

}

</script>

The reason we don't care about the onClick and onKeyUp is because we never get to that point. What's supposed to happen is that the eval() is supposed to run some javascript that populates the combo boxes with some predefined variables. It works perfectly, as long as the inputs are static. However, when I hit the button that runs this script, it pukes on that combohandleKeyUp right near the beginning, where it is supposed to find the following object:

document.forms['WEB070EDIT'].elements["P2_MATERIAL_1"]

Obviously this is all variables inside the script itself, but that's what it parses out to according to the debugger.

When I use Firebug's DOM inspector, I can find the forms, I can find WEB070EDIT, but I can't find the hidden input P2_MATERIAL_1. The static stuff's all in there, but nothing that's getting dynamically generated. Does this simply not work with dynamic objects? Am I missing something? Am I building it completely wrong?

---

I see various issues in here.

I don't understand why you're using eval(). The things that you're eval-ing could be just called as plain old JavaScript. The first eval() can be dropped and replaced by a simple .focus() call on the element as soon as it is added to the DOM.

What do you expect this to do?

document.createElement("text");

That creates a <text> tag in the HTML but that's not a valid tag. Are you trying to do something like this?

document.createElement("input");
cellElem.type = 'text';
//...

You're setting a size attribute so I'm guessing that you're trying to produce <input type="text" .../>.

You are initializing addForm1.counter but you never increment it. You'll end up with duplicate IDs that way and that leads to the gnashing of teeth and sundry sorts of confusion.

You create a <select>:

cellElem = document.createElement("select");

and then throw it away as you neglect to add it to the DOM. You also create an onClick attribute right after the <select> but you didn't add it to anything.

I stripped your code down a bit and added some things you were missing, seems to work just fine: http://jsfiddle.net/ambiguous/3v6R3/