Problem mit Prüfung von dynamisch erzeugten Elementen unter IE

[avo]

Hallo

Vielleicht kann mir hier einer bei einem Javascript Problem im IE helfen.

Ich habe im HMTL Code zwei leere Div mit den IDs spec1 und spec2. Über einen Link mit der Anweisung javascript:addSpec(1) können im Div spec1 Textfelder erzeugt werden.
Über einen weiteren Link javascript:copySpec(2) sollen die Textfelder aus spec1 in das Div spec2 kopiert werden falls die Felder noch nicht vorhanden sind. Das funktoniert auch soweit. Wenn der Link mit javascript:copySpec(2) ein weiteres Mal angeklickt wird soll überprüft werden ob das jeweilige Feld schon existiert und nicht nochmal kopiert werden. Klappt in allen Browsern eigentlich wunderbar nur der IE macht Probleme. Während andere Browser (Firefox + Opera) wie erwartet die Felder kein zweites Mal kopieren, kann ich mit dem IE immer weiter munter Felder anhängen.

Ob ein Element existiert versuche ich mit getElementsByName herauszufinden aber genaue hier hat der IE anscheinend Probleme. Hat jemadn eine Idee wie ich mein Script verbessern kann damit mein Vorhaben auch im IE funktioniert?

Hier noch das vereinfachte Javascript:

<script type="text/javascript">
       var i = 0;

function addSpec(lang)
       {
        var newElem = document.createElement('div');

var newInput = document.createElement('input');
          newInput.type = 'text';
          newInput.name = 'spec[' + lang + '][' + i + '][name]';
          newInput.size = '30';
          newInput.maxlength = '50';

newElem.appendChild(newInput);

document.getElementById('spec' + lang).appendChild(newElem);

i++;
        }

function copySpec(lang)
        {
         var elem = '';
         var elements = document.getElementById('spec1').getElementsByTagName('input');
         for (j = 0; j < elements.length; j++)
         {
          if (elements[j].type == 'text')
          {
           elem = document.getElementsByName('spec[' + lang + '][' + j + '][name]')[0];
           if (elem)
           {
            document.write('element gefunden');
           }
           else
           {
             var newElem = document.createElement('div');

var newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.name = 'spec[' + lang + '][' + j + '][name]';
                newInput.size = elements[j].size;
                newInput.maxlength = elements[j].maxlength;
                newInput.value = elements[j].value;

newElem.appendChild(newInput);

document.getElementById('spec' + lang).appendChild(newElem);
              }
          }
         }
        }
      </script>

[suit]

<script type="text/javascript">

warum maskierst du hier die anführungszeichen? ist das in eine andere scriptsprache (zb php) eingebettet? wenn ja, könntest du zusätzlich ein ganz anderes problem haben

[avo]

<script type="text/javascript">
warum maskierst du hier die anführungszeichen? ist das in eine andere scriptsprache (zb php) eingebettet? wenn ja, könntest du zusätzlich ein ganz anderes problem haben

Ops, ja die Seite selbst ist in PHP. Aber auch wenn ich den Code in eine reine HTML-Seite einbaue habe ich das Problem.
Interessanterweise habe ich eben herausgefunden, dass das Script anscheinend kein Problem hat wenn ich die Felder unter spec2 nicht dymanisch sondern fest einbaue. Dann findet auch der IE die Sachen über getElementsByName.

Das bestärkt meine eigene Vermutung, das der IE die dynamisch erzeugten Felder im Div spec2 irgendwie nicht richtig mit getElementsByName ansprechen kann, aus welchen Grund auch immer.

Gruß
avo

[ChrisB]

Hi,

Das bestärkt meine eigene Vermutung, das der IE die dynamisch erzeugten Felder im Div spec2 irgendwie nicht richtig mit getElementsByName ansprechen kann, aus welchen Grund auch immer.

Ja, der IE hat das Problem mit dynamisch erzeugten Formularfeldern, wenn man sie ueber createElement erzeugt, und anschliessend versucht, ihr name-Attribut zu setzen.

Die "alternative" Syntax, welche das MSDN vorschlaegt, sollte das Problem zwar umgehen - aber dann muss man bei der Elementerzeugung zweigleisig fahren.

MfG ChrisB

[avo]

Hallo

Ich habe das Problem inzwischen slebst lösen können. Ich lese jetzt einfach alle vorhandenen Input-Felder im Div spec2 mit document.getElementById('spec' + lang).getElementsByTagName('input'); aus und frage dann mit if (typeof elements2[j] != 'undefined') ob das Feld deinfiert ist.
Nachdem ich das Problme gelöst habe kann ich nun weiter basteln. :-)

Der Code sieht jetzt so aus:

<script type="text/javascript">
       var i = 0;

function addSpec(lang)
       {
        var newElem = document.createElement('div');

var newInput = document.createElement('input');
          newInput.type = 'text';
          newInput.name = 'spec[' + lang + '][' + i + '][name]';
          newInput.size = '30';
          newInput.maxlength = '50';

newElem.appendChild(newInput);

document.getElementById('spec' + lang).appendChild(newElem);

i++;
        }

function copySpec(lang)
        {
         var elements = document.getElementById('spec1').getElementsByTagName('input');
         var elements2 = document.getElementById('spec' + lang).getElementsByTagName('input');

for (j = 0; j < elements.length; j++)
         {
          if (elements[j].type == 'text')
          {
           if (typeof elements2[j] != 'undefined')
           {
        elements2[j].value = elements[j].value;
           }
           else
           {
             var newElem = document.createElement('div');

var newInput = document.createElement('input');
                newInput.type = 'text';
                newInput.name = 'spec[' + lang + '][' + j + '][name]';
                newInput.size = elements[j].size;
                newInput.maxlength = elements[j].maxlength;
                newInput.value = elements[j].value;

newElem.appendChild(newInput);

document.getElementById('spec' + lang).appendChild(newElem);
              }
          }
         }
        }
      </script>