Durchnummerierung von dynamisch erzeugten Formularelementen

J

Jochmin

Grünschnabel
Hallo, ich bin gerade dabei ein Formular zu erstellen, jedoch bekomme ich es bei der dynamischen Ergänzung nicht mit der fortlaufenden Nummerierung hin:

HTML: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
          for(i=1; i<100; ++i)
       var platz = "Arbeitsplatz " +i;
          document.getElementById("arbeit")
          .innerHTML = platz;
            
         
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}
//-->
</script>
</head>
<body>
<form>
<div>
   <h2 id="arbeit">Arbeitsplatz 1</h2>
     
      <label for="uberschrift">Überschrift:</label>
    <input size="100"><br>
      <br>
       <label for="inhalt">Text:</label>
    <input size="100"><br>
      <br>
     <label for="bild">Bild:</label>
    <input type="file"><br>
      <br>
     <label for="video">Video:</label>
    <input  type="file"><br>
      <br>
      <label for="schluss">Schlusstext:</label>
      <input size="100"><br>
    <br>
  <input type="button"value="noch eins"onclick="clone_this(this)">
</div>
</form>
</body>
</html>

Auch versuche ich den entfernen Button neben den "Neuen Arbeitsplatz"-Button zu bekommen und dass dieser auch jeweils nur für das letzte erschaffenden Arbeitsplatz gilt bzw. nur dieser gelöscht werden kann.

Wäre super wenn mir jemand unter die Arme greifen könnte. Schon mal ein großes Danke!

Gruß, Jochbart
 
Was soll denn da fortlaufend nummeriert werden?
Die Labels habe zwar jeweils ein for-Attribut, aber die IDs, auf die diese verweisen, existieren nicht.
Bei den Inputs fehlt der Name.
 
Hi,

so richtig schlau werde ich aus dem, was du da insgesamt versuchst nicht.

Aber nur die Nummerierung über die ID arbeit betrachtet:

Da eine ID innerhalb eines Dokuments eindeutig sein muss, ist dein Konstrukt nicht richtig, da bei jedem Klonen die ID dupliziert wird und somit mehrmals im Dokument existiert. Die Methode getElementById berücksichtigt die Eindeutigkeit von IDs innerhalb eines Dokumentes und findet aus diesem Grund jeweils nur das erste Element. Deine Umbenennung bezieht sich somit immer auf das erste im Dokument vorkommende Element mit der ID arbeit.
Vielleicht wäre es günstiger, statt der ID eine Klasse zu verwenden. Damit könntest du über die Elemente mit dieser Klasse iterieren und das gewünschte Verhalten implementieren.

Beispiel für die Klasse .arbeit:
Code: 
[].slice.call(document.querySelectorAll('.arbeit')).forEach(function(elem, index) {
  elem.innerHTML = "Arbeitsplatz " + (index+1);
});

Damit sollte zumindest das Nummerierungsproblem gelöst sein. Ich hoffe, das hilft dir weiter.

Ciao,
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück