✔ Automatisches Erstellen von Formularelementen

forsterm

forsterm

Erfahrenes Mitglied
Hallo,
also ich benutze folgenden Code
HTML: 
<html>
    <head>
        <script type="text/javascript">
            function clone_this(objButton)
            {
                tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
                tmpNode.getElementsByTagName('input')[1].style.display='inline';
                tmpElm=document.createElement('input');
                tmpElm.type=objButton.form.elements[0].type;
                tmpElm.name=objButton.form.elements[0].name;
                tmpElm.id=objButton.form.elements.length;
                objButton.parentNode.insertBefore(tmpNode, objButton.parentNode.lastChild);
            }
            function remove_this(obj)
            {
                obj.parentNode.parentNode.removeChild(obj.parentNode);
            }
        </script>
    </head>
    <body>
        <form>
            <dl>
                <dt>Anh&auml;nge</dt>
                <dd>
                    <input name="attachments[]" type="file" />
                    <input type="button" onclick="remove_this(this);" value="l&ouml;schen"style="display:none" />
                </dd>
                <dd><input value="noch eins" onclick="clone_this(this);" type="button" /></dd>
            </dl>
        </form>
    </body>
</html>
um automatisch Dateiupload - Felder zu einem Formular hinzufügen zu lassen.
Funktioniert auch fast perfekt, bis auf die Tatsache, dass die neuen Elemente zwischen <dd> und <input value="noch eins" onclick="clone_this(this);" type="button" /></dd> anstatt vor <dd><input value="noch eins" onclick="clone_this(this);" type="button" /></dd> erstellt werden.
Mein Frage ist nun eigentlich ganz simpel, wie muss ich denn den oben gezeigten Coden ändern, um mein beschriebenes Problem zu lösen?

mfg
forsterm
 
Hi,

insertBefore fügt von einem Knoten ausgehend, einen neuen Kindknoten vor einen bestehenden
Kindknoten ein. Bei dir wäre der Elternknoten das DL-Element.

Änder mal folgende Zeile
Code: 
objButton.parentNode.insertBefore(tmpNode, objButton.parentNode.lastChild);
in
Code: 
objButton.parentNode.parentNode.insertBefore(tmpNode, objButton.parentNode.parentNode.lastChild);
Ciao
Quaese
 
Hallo,
Quaese hat gesagt.:
Änder mal folgende Zeile
Code: 
objButton.parentNode.insertBefore(tmpNode, objButton.parentNode.lastChild);
in
Code: 
objButton.parentNode.parentNode.insertBefore(tmpNode, objButton.parentNode.parentNode.lastChild);
Zum Vergrößern anklicken....
danke erstmal für deine Antwort, aber wenn ich das so änder, dann fügt er mir die neuen Uploadfelder nach dem Button ein und nicht wie gewünscht davor.

mfg
forsterm
 
Mhm kann mir nicht helfen

Code: 
objButton.parentNode.parentNode.insertBefore(tmpNode, objButton.parentNode.parentNode.lastChild);

wäre eigentlich auch das wovon ich ausgehen würde , nur knallt er mir dann nen XML Error um die Ohren da dieses Element nen #text Knoten wäre. das ist der letzte Zeilenumbruch im Editor der gemacht wurde.

Hab dies nun soweit abgeändert das ich einfach zum Elternknoten hochgeh , und alle Elemente durchlauf , wenn etwas ein besagter #text Knoten ist überspring ich ihn einfach.
Somit ist nun garantiert der letzte Knoten das <DD> Element.

Ja und da fügen wir dann den neuen Knoten einfach ein.

Code: 
            function clone_this(objButton)
            {
                tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
                tmpNode.getElementsByTagName('input')[1].style.display='inline';
                tmpElm=document.createElement('input');
                tmpElm.type=objButton.form.elements[0].type;
                tmpElm.name=objButton.form.elements[0].name;
                tmpElm.id=objButton.form.elements.length;
                
                var lastNode = null;
                
                with(objButton.parentNode.parentNode) {
                    for(var i = 0 ; i < childNodes.length;i++ ) {
                        if(childNodes[i].nodeName == '#text') continue;                        
                        lastNode = childNodes[i];
                    }
                    insertBefore(tmpNode, lastNode);                      
                }                                
            }
 
Zuletzt bearbeitet:
Hi,

ich ermittel vom Button ausgehend solange das Elternelement, bis ich beim DL-ELement angekommen
bin (while-Schleife). Dann erstelle ich mit der Methode getElementsByTagName eine Kollektion
mit allen DDs innerhalb des DL-Objekts. Vor das letzte Element hänge ich den neuen Kindknoten ein.
Code: 
function clone_this(objButton){
  tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
  tmpNode.getElementsByTagName('input')[1].style.display='inline';
  tmpElm=document.createElement('input');
  tmpElm.type=objButton.form.elements[0].type;
  tmpElm.name=objButton.form.elements[0].name;
  tmpElm.id=objButton.form.elements.length;

  // Passenden Elternknoten ermitteln
  var objNode = objButton.parentNode;
  while(objNode.nodeName.toLowerCase() != "dl"){
    objNode = objNode.parentNode;
  }

  // Neuen Knoten vor letzten Kindknoten einhängen
  objNode.insertBefore(tmpNode, objNode.getElementsByTagName("dd")[objNode.getElementsByTagName("dd").length-1]);
}
Ciao
Quaese
 
Hallo,
super funktioniert 1a, war mir bei dir auch klar, dass das so ist. ;)
Also echt vielen Dank, für die super Hilfe.

mfg
forsterm
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück