IE ist nicht die Vorlage Formular-Elemente dynamisch Hinzugefügt
Schrieb ich einige JavaScript zu erlauben, die Bearbeitung einer Liste von Elementen in einem HTML-Formular, einschließlich dem hinzufügen und entfernen von Elementen. Habe es funktioniert in Firefox. Wenn Sie versuchen, in Internet Explorer, fand ich, dass alle hinzugefügten Elemente wurden nicht mit dem Formular gesendet.
Lange Rede, kurzer Sinn... viel Vereinfachung, debugging herausgefunden, welche Zeile ist die Auslösung IE zu ignorieren, die neue Eingabe in ein Formular. Also ist das Verhalten problem ist gelöst.
Aber jetzt muss ich Fragen: Warum? Ist das ein IE bug?
Ist hier der vereinfachte code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function add() {
div = document.getElementById("mylist");
//*** Adding text here works perfectly fine. ***
div.innerHTML += " ";
e = document.createElement("input");
e.setAttribute("type", "text");
e.setAttribute("name", "field3");
e.setAttribute("value", "--NEWVALUE--");
div.appendChild(e);
//*** Adding text here works perfectly fine in Firefox, but for
// Internet Explorer it causes field3 to not be submitted. ***
//div.innerHTML += " ";
}
</script>
</head>
<body>
<form action="" method="get">
<div id="mylist">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
</div>
<a href="javascript:" onclick="add()" />Add</a>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Probieren Sie es aus, tun das offensichtliche: laden im IE, klicken Sie auf Hinzufügen, klicken Sie auf Senden, schauen Sie, was in der Adressleiste. Wenn Sie kommentieren Sie die Letzte Zeile in add()
, IE wird plötzlich aufhören reporting field3
. Es funktioniert gut, entweder, wie in Firefox.
Irgendwelche Ideen? Ein neugieriger Geist will es wissen. (Und wie sollte ich hinzufügen, text, wenn nötig, in eine tragbare Mode, also IE ist glücklich?)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Scheint so zu sein. Wenn Sie erstellen ein <input> - element über DOM-Methoden, also die nicht ganz abholen der 'name' - Attribut. Es ist eine Art von es in dass das element nicht übergeben, aber wenn Sie versuchen, eine 'innerHTML' - Darstellung des Elements auf mysteriöse Weise verschwindet. Dies geschieht nicht, wenn Sie das element anlegen, indem Sie schreiben direkt an innerHTML.
Auch wenn Sie DOM Level 0 form navigationsmethoden, wie ‘myform.Elemente.x.Wert', Zugang über die 'Elemente' array kann nicht funktionieren (ähnlich wie die direkte "myform".x' Zugriff auf einige Menschen misguidedly verwenden). In jedem Fall ist in diesen Tagen bevorzugen Sie vielleicht getElementById().
So entweder Verwendung von innerHTML oder Verwendung von DOM-Methoden; am besten nicht zu mischen beim erstellen von Formular Feldern.
Dies ist dokumentiert (siehe 'Bemerkungen') und schließlich Feste im IE8.
In jedem Fall niemals tun:
Dies ist nur syntaktischer Zucker für:
In anderen Worten, es muss serialise die gesamte untergeordnete HTML-Inhalt des Elements, dann tun Sie die string-Verkettung, dann re-analysieren Sie die neue Zeichenfolge zurück, in dem element, wegwerfen alle den ursprünglichen Inhalt. Das bedeutet, dass Sie nichts zu verlieren, das kann nicht sein, serialisierte: sowie der IE-Schein-Hälfte-erstellt 'name' - Attribute, die auch bedeutet, dass alle JavaScript-event-Handler, DOM Zuhörer oder andere benutzerdefinierte Eigenschaften, die Sie angefügt haben, dass jedes untergeordnete element. Auch der unnötige serialise/parse-Zyklus ist langsam.
IE ist sehr wählerisch, ändern einige integrierte Eigenschaften zur Laufzeit. Zum Beispiel, der name eines input-element kann nicht geändert werden, während set.
Zwei Dinge, die ich versuchen würde, wenn ich du wäre:
Anstatt
setAttribute()
, versuchen Sie, diename
,type
undvalue
Eigenschaften explizit:e.name = "text";
Wenn das nicht funktioniert, Sie müssen möglicherweise alle diese Attribute in die
document.createElement()
nennen:var e = document.createElement("<input type='text' name='field'>");
dies kann tatsächlich eine Ausnahme werfen, die in einigen Browsern. Also die besten cross-browser Weg zu gehen wäre:
.
Danke bobince und levik für Eure Antworten. Mit diesen und einigen mehr Experimentieren, hier sind meine Schlussfolgerungen:
Ja, es ist ein IE-bug.
IE 8 behebt den Fehler, der nach Microsoft: "Internet Explorer 8 und höher können die NAME-Attribut zur Laufzeit auf Elemente dynamisch erstellt mit der createElement-Methode."
Der Fehler ist dieser: Aufruf
e.setAttribute("name", "field3")
nur Art-von setzt den Namen. Es wird funktionieren, wenn nichts anderes passiert mit dem element, aber wenn gewünscht, zu serialisieren, die Namen werden nicht serialisiert. Also, wenn ich sagteinnerHTML += " "
gezwungen, eine Serialisierung, die verloren werden der name, so war es nicht wiederhergestellt werden, bei der Deserialisierung. Kein name, keine Eingliederung in form der Unterwerfung.Workaround #1:
e = document.createElement("<input name='field3' />")
funktionieren würde, selbst wenn Sie vor der Serialisierung.Workaround #2: Anstatt das hinzufügen von text mit innerHTML + = ich kann fügen Sie ein text-element wie diesem:
div.appendChild(document.createTextNode(" "));
. Ich hatte dachte, es muss einen besseren Weg, das hinzufügen von text, und jetzt weiß ich es :-).Cheers,
--jsf