✔ Length des über DOM erweiterten getElementsByName Array im IE und Firefox unterschied

[WACSF]

Hallo allerseits,

ich suche schon ne halbe Ewigkeit nach einer Lösung für folgendes Problem.
Ich habe ein HTML INPUT Textfeld am Anfang und man kann über DOM immer noch eines dazuerstellen.
Das weltbewegende Element:

<input name="t_provider" type="text" class="input" size="3" maxlength="5" value="" />

JS Code zur Erzeugung eines neuen Objekts:

	var prov = document.createElement('INPUT');
	prov.name = 't_provider';
	prov.type = 'text';
	prov.className = 'input';
	prov.size = '3';
	prov.maxLength = '5';	
	prov.value = provider;

So das ganze funktioniert wunderbar im Firefox und auch im IE.
Nun, nachdem ich sagen wir mal 5 Elemente hinzugefügt habe, will ich zuerst die Länge des Array ([object HTMLCollection] im FF, oder Object in IE) auslesen.
Hier liegt das erste Problem. Firefox ermittelt die korrekte Länge der Collection auch nach Hinzufügen von weiteren INPUT's per DOM und ich kann somit auch die einzelnen Elemente ansprechen.
Der IE7 hingegen ermittelt jedesmal die Länge 1. Ich vermute, dass die über DOM hinzugefügten Felder nicht in die "Collection" aufgenommen werden, da ich am Anfang initial nur ein Formularfeld habe kommt somit auch immer die Länge 1.

Ich wäre für jedliche Hilfe, die sich auf das Problem beziehen dankbar,
bitte keine "Wieso willst du das machen" oder ähnliches - ich will es einfach.

Schöne Grüße und Danke im Voraus,
WACSF

 

[Quaese]

Hi,

mit den name-Attribut hat der IE in diesem Zusammenhang so seine Probleme. Aber es gibt zwei Lösungsmöglichkeiten.

1. Der IE toleriert als Argument für die createElement-Methode einen kompletten HTML-String. Wird das name-Attribut hier notiert, sollte es funktionieren.

function cloneField(provider){
  var prov = null;
  if(document.all && !window.opera){
    prov = document.createElement('<INPUT type="text" name="t_provider" class="input" size="3" maxlength="5" value="'+provider+'">')
  }else{
    prov = document.createElement('INPUT');
    prov.name = 't_provider';
    prov.type = 'text';
    prov.className = 'input';
    prov.size = '3';
    prov.maxLength = '5';
    prov.value = provider;
  }
  document.getElementById("inputDiv").appendChild(prov);
}

2. Da die Textfelder alle identisch sein sollen und als Ausgangselement das Feld im Quellcode dient, könntest du mit der Methode cloneNode arbeiten.

function cloneField(provider){
  var prov = document.getElementsByName("t_provider")[0].cloneNode(true);
  prov.value = provider;
  document.getElementById("inputDiv").appendChild(prov);
}

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[WACSF]

Hallo,

danke für Deine sehr hilfreichen Vorschläge. Mit Variante 1 funktioniert es jetzt so wie ich es mir vorstelle. Für Firefox mach ich das "normale" DOM und für IE eben die HTML Variante.

Ich verwende die zweite Variante deswegen nicht, weil ich nicht nur ein einzelnes INPUT Feld klonen wollte - das war der Einfachheit halber gewählt -, sondern das zu klonende recht kompliziert aufgebaut ist und doch einige Änderungen nötig sind, so dass ich es neu aufbauen wollte, was sicherlich weniger Arbeit war - so dachte ich zumindest.

Herzlichen Dank nochmal

WACSF