fieldset klonen mit JavaScript / jQuery

[emmmmmi]

Hallo zusammen!

Arbeite ein wenig mit JavaScript und versuche mit meinen laienhaften Kenntnissen folgendes zu realisieren:
Es soll ein fieldset dupliziert werden, wenn man auf einen Button drückt. Die Fieldsets übermitteln Daten per POST welche dann auf einer PHP-Seite weiterverarbeitet werden.
Im Moment habe ich das relativ lang gelöst und muss es für jedes fieldset statisch neu schreiben. Gibt es eine elegantere, kürzere und vor allem "für alle fieldsets nutzbar". Hab schon ein paar Versuche mit .clone hinter mir (hab dann den Button mit in das div reingeschrieben und an die funktion übergeben), aber nichts führte zum passenden Ergebnis.

Hat da jemand eine super Idee?

Mein JavaScript (oder im pastebin http://pastebin.com/aU8FtbTg ):

var c = 0;
    function addWerk() {
        c++;
        var thenewfieldset = document.createElement("fieldset");
        thenewfieldset.className = 'wamoform';
        document.getElementById("fieldsethalter").appendChild(thenewfieldset);

        var werklegend = document.createElement("legend");
        werklegend.innerHTML = 'Notwendige Werkzeuge';

        var werklabel1 = document.createElement("label");
        werklabel1.innerHTML = 'Funktion / Aufgabe';

        var werkinput1 = document.createElement("input");
        werkinput1.setAttribute('id', 'asdasd');
        werkinput1.setAttribute('name', 'notwerk_funktion' + c);

        var werklabel2 = document.createElement("label");
        werklabel2.innerHTML = "Medium"

        var werkinput2 = document.createElement("select");
        werkinput1.setAttribute('id', 'asdasdasd');
        werkinput1.setAttribute('name', 'notwerk_medium' + c);
        
        var newoption1 = document.createElement("option");
        newoption1.innerHTML = "Formell";
        
        var newoption2 = document.createElement("option");
        newoption2.innerHTML = "Informell";
        

        thenewfieldset.appendChild(werklegend);
        thenewfieldset.appendChild(werklabel1);
        thenewfieldset.appendChild(werkinput1);
        thenewfieldset.appendChild(werklabel2);
        
        werkinput2.appendChild(newoption1);
        werkinput2.appendChild(newoption2);
        thenewfieldset.appendChild(werkinput2);
    }

Und das fieldset welches geklont werden soll:

<div id="fieldsethalter" class="fieldsetrahmen">
        <fieldset id="notwerkfieldset0" class="wamoform">
            <legend>Notwendige Werkzeuge</legend>
            <label>Funktion / Aufgabe</label>&nbsp;<input name="notwerk_funktion0" type="text" size="30"/><br />
            <label>Medium</label>
            <select name="notwerk_medium0">
                <option>Formell</option>
                <option>Informell</option>
            </select>
        </fieldset>
    </div>

 

[Labrar]

Natürlich gibt es das. Ajax oder reiner JS Code?
Ajax ist natürlich um Welten besser geignet.
Sag an

Die Shortvariante wäre folgende

var dublis=0;
var dublihtm=document.getElementById('fieldsethalter').innerHTML;
var fieldsets=new Array();
function dublidiv(){
 var idnamer='notwerkfieldset'+dublis;
var backs='<fieldset id="'+idnamer+'" class="wamoform"><legend>Notwendige Werkzeuge</legend><label>Funktion / Aufgabe</label>&nbsp;<input name="notwerk_funktion0" type="text" size="30"/><br /><label>Medium</label><select name="notwerk_medium0"><option>Formell</option><option>Informell</option></select></fieldset>';

fieldsets.push(backs);
var lasthtm='';
for(var i=0; i<fieldsets.length; i++){
   lasthtm+=fieldsets[i];
}
document.getElementById('fieldsethalter').innerHTML=lasthtm;
dublis++;
}

//erstes Filedset
dublidiv();

//und eben bei buttonclick entsprechend nochmal dublidiv(); aufrufen

Nur so als Beispiel. Wobei Ajax die bessere Lösung wäre

 

[emmmmmi]

Danke Labrar, das sieht doch schon mal wesentlich besser als mein Wirrwarr aus

Mit Ajax meinst Du genau was?

Meine Idee war jetzt noch quasi mit dem Buttonklick irgendwas zu übergeben um der Funktion zu sagen "hey ich bin fieldsetX".

function addFieldset(button) {
	var fieldsetToClone = $(button).parent('fieldset');
	var aussendiv = fieldsetToClone.parent();
	newFieldSet = fieldsetToClone.clone();
	aussendiv.append(newFieldset);
}

aufrufen würde ich es dann mit onclick="addFieldset(this)"
Mein Problem war dann eigentlich immer, dass ich nicht weiß wie ich den namen der Elemente innerhalb des Fieldset komme und wie ich es anstelle, dass der Button nicht auch immer mit dupliziert wird.
Werde nun aber erst mal mit Deiner Variante fortfahren, danke noch mal.

 

[Labrar]

Na ja. Dazu müsstest du meiner Funktion eigentlich nur ein return idnamer (für den vollständigen Namen) oder return dublis (Für die jeweilige Nummer) hinzufügen.
Die Funktion müsstest du dann natürlich so aufrufen

var neueseelement=dublidiv();
alert(neueseelement);

Ajax ist sauberer. Dauert zwar länger als das bisherige Beispiel, aber du kannst dafür dynamisch auf jedes einzelne Fieldset zugreifen.
Schau einfach mal bei Google unter AJAX. (Nicht das Putzmittel)

Dir das jetzt zu erklären würde den Rahmen sprengen.

 

[emmmmmi]

Danke Dir noch mal, hab meinen Weg jetzt gefunden. Hab die Funktion von Dir noch etwas angepasst und das läuft erst mal.