2010-12-31 4 views
0

Ich kann nur annehmen, dass ich etwas falsch mache, weil, wenn ich durch das Javascript gehe, es das Objekt überhaupt nicht finden kann.Javascript: Kann neu hinzugefügte Formulareingaben im DOM nicht finden

Was ich versuche, ist dynamisch Zeilen der Kombinationsfelder zur Tabelle hinzufügen. Der Kombinationsfeldcode ist mehr oder weniger irrelevant, da das Versuchen, die neu generierten Eingaben in dem DOM zu finden, indem das Formular durchgeht, nicht zu funktionieren scheint. Ich bin mir nicht sicher, ob sie überhaupt existieren.

Zuerst habe ich die Form selbst:

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

Dann niedriger ist, gibt es die Tabelle, die die erzeugten Zellen enthält:

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

Ein bisschen oben, es ist meine abscheuliche Skript-Funktion, füllt die Tabelle:

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

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

Der Grund, warum wir uns nicht für die onClick und onKeyUp interessieren, ist bec sonst kommen wir nie zu diesem Punkt. Was passieren soll, ist, dass eval() etwas Javascript ausführen soll, das die Kombinationsfelder mit einigen vordefinierten Variablen füllt. Es funktioniert einwandfrei, solange die Eingänge statisch sind. Allerdings, wenn ich den Knopf drücken, der dieses Skript ausgeführt wird, es kotzt an diesem combohandleKeyUp direkt am Anfang, wo es sollte folgendes Objekt finden:

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

Offensichtlich ist dies alle Variablen im Skript selbst, sondern das ist, was es nach dem Debugger analysiert.

Wenn ich Firebugs DOM-Inspektor verwende, kann ich die Formulare finden, ich kann WEB070EDIT finden, aber ich kann den versteckten Eingang P2_MATERIAL_1 nicht finden. Das statische Zeug ist alles drin, aber nichts, was dynamisch erzeugt wird. Funktioniert das einfach nicht mit dynamischen Objekten? Fehle ich etwas? Baue ich es völlig falsch?

+0

Warum Sie 'eval' verwenden? – ChaosPandion

+0

String-Verkettung. –

Antwort

1

Ich sehe verschiedene Probleme hier.

Ich verstehe nicht, warum Sie eval() verwenden. Die Dinge, die Sie auswerten, könnten einfach als einfaches altes JavaScript bezeichnet werden. Die erste eval() kann gelöscht und durch eine einfache .focus() Aufruf für das Element ersetzt werden, sobald es dem DOM hinzugefügt wird.

Was erwarten Sie davon?

document.createElement("text"); 

dass ein <text>-Tag im HTML erstellt, aber das ist kein gültiger Tag. Versuchen Sie, so etwas zu tun?

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

Sie richten ein size Attribut, so vermute ich, dass Sie versuchen, <input type="text" .../> zu produzieren.

Sie initialisieren addForm1.counter, aber Sie erhöhen es nie. Sie werden auf diese Weise mit doppelten IDs enden und das führt zu dem Zähneknirschen und verschiedenen Arten von Verwirrung.

Sie erstellen ein <select>:

cellElem = document.createElement("select"); 

und werfen es dann weg, wie Sie es auf das DOM hinzufügen vernachlässigen.Sie erstellen auch ein onClick Attribut direkt nach dem <select>, aber Sie haben es zu nichts hinzugefügt.

ich Ihren Code ein wenig nach unten abgezogen und fügte einige Dinge, die Sie fehlten, scheint ganz gut zu funktionieren: http://jsfiddle.net/ambiguous/3v6R3/

+0

Der Grund für die Eval() ist, weil ich dort eine Zeichenfolge verketten muss. Ich wusste nicht, ob das ohne Bewertung funktionieren würde. Es stellte sich heraus, dass neben dem, worauf Sie hinwiesen, ein paar zusätzliche Dinge mit meinem Code nicht in Ordnung waren, aber jetzt ist es quadratisch und es funktioniert perfekt in Firefox! Leider schlägt es im Internet Explorer immer noch fehl, aber ich denke, das ist eine Frage für einen anderen Beitrag. Vielen Dank für Ihre freundliche Unterstützung! Es war sehr nützlich. –