1. Wenn du alle Inhalte sehen, oder selber eine Frage erstellen möchtest, kannst du dir in wenigen Sekunden ein Konto erstellen. Die Registrierung ist kostenlos, als Mitglied siehst du keine Werbung!

fieldset klonen mit JavaScript / jQuery

Diskutiere das Thema fieldset klonen mit JavaScript / jQuery im Forum Web-Programmierung.

  1. emmmmmi

    emmmmmi Thread Starter Mitglied

    Beiträge:
    515
    Zustimmungen:
    18
    Mitglied seit:
    15.01.2006
    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? :D

    Mein JavaScript (oder im pastebin http://pastebin.com/aU8FtbTg ):
    PHP:
    var 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:

    HTML:
    <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>
    
     
  2. Labrar

    Labrar Mitglied

    Beiträge:
    129
    Zustimmungen:
    3
    Mitglied seit:
    07.09.2004
    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
    PHP:
    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=0i<fieldsets.lengthi++){
       
    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
     
  3. emmmmmi

    emmmmmi Thread Starter Mitglied

    Beiträge:
    515
    Zustimmungen:
    18
    Mitglied seit:
    15.01.2006
    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".

    PHP:
    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.
     
  4. Labrar

    Labrar Mitglied

    Beiträge:
    129
    Zustimmungen:
    3
    Mitglied seit:
    07.09.2004
    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.
     
  5. emmmmmi

    emmmmmi Thread Starter Mitglied

    Beiträge:
    515
    Zustimmungen:
    18
    Mitglied seit:
    15.01.2006
    Danke Dir noch mal, hab meinen Weg jetzt gefunden. Hab die Funktion von Dir noch etwas angepasst und das läuft erst mal.
     
Die Seite wird geladen...
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite weitersurfst, akzeptierst du unseren Einsatz von Cookies. Akzeptieren Weitere Informationen...