Formular dynamisch erweitern/verschachtelte div's

[_chris]

Hallo,
ich muss gleich zu beginn sagen, dass ich leider noch nicht viel Ahnung von Javascript habe.
Ich habe zu meiner Frage jetzt auch schon einige Zeit im Internet gestöbert und teilweise auch schon fündig geworden aber so ganz das richtige war noch nicht dabei.
Und zwar muss ich für ein Projekt ein Formular an zwei bis drei stellen dynamisch erweitern.
Das größte Problem dabei ist, dass die div's die geklont werden sollen immer anders verschachtelt sind und ich durch die Sache mit parent und child noch nicht durchgestiegen bin.
Es soll also durch klicken auf einen Button ein bestimmer Container mit dem ganzen Inhalt (auch mit den weiteren enthaltenen divs und den darin enthaltenen input feldern) darunter kopiert werden und dazu soll noch ein entfernen Button erzeugt werden.

Hier mal die zwei Container mit denen ich momentan rumprobiere.

    <div class="reihe">
        <div class="form_links">Programmpunkte: </div><!-- ende form_links -->
        <div class="form_rechts">
        	<div class="reihe_in_reihe">
                	Beschreibung: <br />
                	<textarea class="textarea" name="prg_pkt[]"></textarea>
            </div><!-- ende reihe_in_reihe -->
            <div class="reihe_in_reihe">
                <div class="form_rechts_links">Preis: </div>
                <div class="form_rechts_rechts">
					<input type="text" class="textfeld_5z" name="preis_prg_pkt[]" size="30" /> &euro; 
                    <select name="person_prg_pkt[]"><option>pro Person</option><option>gesamt</option></select>
                </div>
            </div><!-- ende reihe_in_reihe -->
        </div><!-- ende form_rechts -->
    </div><!-- ende reihe -->

    <div class="reihe">
        <div class="form_links">Ek Preis/Person: </div><!-- ende form_links -->
        <div class="form_rechts">
        	<div class="reihe_in_reihe">
                <div class="form_rechts_links">von</div>
                <div class="form_rechts_rechts">
                
                     <select name="StartD[]">

                        <option></option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option>                    </select>

                    <select name="StartM[]">
                        <option></option>
                        <option value="01">Jan</option>
                        <option value="02">Feb</option>
                        <option value="03">M&auml;r</option>
                        <option value="04">Apr</option>

                        <option value="05">Mai</option>
                        <option value="06">Jun</option>
                        <option value="07">Jul</option>
                        <option value="08">Aug</option>
                        <option value="09">Sep</option>
                        <option value="10">Okt</option>

                        <option value="11">Nov</option>
                        <option value="12">Dez</option>
                    </select>
                    <select name="StartY[]">
                        <option></option><option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option>                    </select>
                </div>

            </div> <!-- ende reihe_in_reihe -->
            
        	<div class="reihe_in_reihe">
                <div class="form_rechts_links">bis</div>
                <div class="form_rechts_rechts">
                
                    <select name="EndD[]">
                        <option></option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option><option value=20>20</option><option value=21>21</option><option value=22>22</option><option value=23>23</option><option value=24>24</option><option value=25>25</option><option value=26>26</option><option value=27>27</option><option value=28>28</option><option value=29>29</option><option value=30>30</option><option value=31>31</option>                    </select>

                    <select name="EndM[]">
                        <option></option>
                        <option value="01">Jan</option>
                        <option value="02">Feb</option>
                        <option value="03">M&auml;r</option>
                        <option value="04">Apr</option>

                        <option value="05">Mai</option>
                        <option value="06">Jun</option>
                        <option value="07">Jul</option>
                        <option value="08">Aug</option>
                        <option value="09">Sep</option>
                        <option value="10">Okt</option>

                        <option value="11">Nov</option>
                        <option value="12">Dez</option>
                    </select>
                    <select name="EndY[]">
                        <option></option><option value=2010>2010</option><option value=2011>2011</option><option value=2012>2012</option>                    </select>
                
                </div>

            </div> <!-- ende reihe_in_reihe -->
            
            <div class="reihe_in_reihe">
                <div class="form_rechts_links">Preis</div>
                <div class="form_rechts_rechts">
                	<input type="text" class="textfeld_5z" name="preis_saison[]" size="30" /> &euro;
                </div>
            </div> <!-- ende reihe_in_reihe -->

        </div><!-- ende form_rechts -->
        <div class="form_links">zus&auml;tzliche Marge:</div><!-- ende form_links -->
        <div class="form_rechts">
            <input type="text" class="textfeld_5z" name="mage_pers" size="30" /> 
            <select name="person_prg_pkt[]"><option>&euro;</option><option>%</option></select> / Person
        </div><!-- ende form_rechts -->
    </div><!-- ende reihe -->
    

Und das war bis jetzt das treffenste Javascript was ich im Netz gefunden habe.

function clone_this(objButton)
{
    var tmpNode = objButton.form.elements.parentNode.cloneNode(true);
    tmpNode.getElementsByTagName('input')[1].style.display = 'inline';
    var tmpElm = document.createElement('input');
    tmpElm.type = objButton.form.elements[0].type;
    tmpElm.name = objButton.form.elements[0].name;
    tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
    objButton.form.insertBefore(tmpNode,objButton);
}

function remove_this(obj)
{
  obj.form.removeChild(obj.parentNode);
}
//--> 

Dazu dann der HTML code

<form method="" action="" id="test">
 <div>
  <label>E-Mail: </label><input name="textfeldname[]" type="text" />
  <a href="#" onclick="remove_this(parentNode)" style="display: none; ">löschen</a>
 </div>
 <a href="#" onclick="clone(this)">noch eins</a>
</form>

Das Problem ist jetzt, dass wenn ich einen der beiden Code-Auszüge vom Anfang des Posts gegen <label>E-Mail: </label><input name="textfeldname[]" type="text" /> ersetze, dann funktioniert die Klon Funktion nicht mehr. Das liegt scheinbar daran, dass meine div's weiter in die Tiefe gehen und ich auch textareas bzw dropdowns benutze. So hab ich mir das zumindest erklärt.
Habt ihr einen Tipp wie ich es vllt. hinbekomme, dass egal was zwischen dem <div class="reihe"></div> das div komplett geklont wird? Dann könnte man das ganze universeller einsetzen.

Da ich ja leider noch garkeine Ahnung von der ganzen Sache habe wäre ich auch dazu bereit für eine funktionierende Lösung zu zahlen. Bei Interesse am besten einfach eine pm.

Ansonsten schonmal vieeel Dank!
Beste Grüße,
Christoph

[kkapsner]

1. Fehlerkonsole (Wo finde ich die Fehlerkonsole?).
2. Die Funktion heißt doch clone_this und nicht nur clone...

[_chris]

Hallo,
vielen Dank für deine Antwort!
Nur leider lag es nicht nur daran, dass ich eine Funktion aufrufen wollte die es nicht gab.
Die Fehlerkonsole ist super aber leider kann ich den Informationen nicht viel abgewinnen da ich, wie gesagt, noch überhaupt keine Ahnung von Javascript habe.
Ich habe mir das ganze jetzt so zusammengesetzt

<script type="text/javascript">
<!--
function clone_this(objButton)
{
    var tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
    tmpNode.getElementsByTagName('input')[1].style.display = 'inline';
    var tmpElm = document.createElement('input');
    tmpElm.type = objButton.form.elements[0].type;
    tmpElm.name = objButton.form.elements[0].name;
    tmpNode.replaceChild(tmpElm,tmpNode.getElementsByTagName('input')[0]);
    objButton.form.insertBefore(tmpNode,objButton);
}

function remove_this(obj)
{
  obj.form.removeChild(obj.parentNode);
}
//-->
</script>
</head>
<body>
<form>
 <div>
      <div class="reihe">
        <div class="form_links">Programmpunkte: </div><!-- ende form_links -->
        <div class="form_rechts">
        	<div class="reihe_in_reihe">
                	Beschreibung: <br />
                	<textarea class="textarea" name="prg_pkt[]"></textarea>
            </div><!-- ende reihe_in_reihe -->
            <div class="reihe_in_reihe">
                <div class="form_rechts_links">Preis: </div>
                <div class="form_rechts_rechts">
					<input type="text" class="textfeld_5z" name="preis_prg_pkt[]" size="30" /> &euro; 
                    <select name="person_prg_pkt[]"><option>pro Person</option><option>gesamt</option></select>
                </div>
            </div><!-- ende reihe_in_reihe -->
        </div><!-- ende form_rechts -->
    </div><!-- ende reihe -->
  <input type="button" onclick="remove_this(this)" value="l&ouml;schen" style="display:none">
 </div>
 <input value="noch eins" onclick="clone_this(this)" type="button" />
</form>
</body>

Nur leider funktioniert das nicht. Ich würde gerne, dass das gesamte <div> mit der class="reihe" geklont wird.
Wie kann ich das anstellen?
In moment passiert beim drücken des Buttons garnichtsund die Fehlerkonsole sagt mir

"Fehler: tmpNode.getElementsByTagName("input")[1] is undefined
Quelldatei: http://localhost/Arbeit/java.html Zeile: 12"

-> Zeile 12 ist hier "tmpNode.getElementsByTagName('input')[1].style.display = 'inline';"

Vieeelen Dank schonmal für eure Hilfe!

[ein schlauer]

Dann prüf doch mal, was in tmpNode steht.

[kkapsner]

1.

var tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);

klont dir nicht deine "reihe" - zerlegen mal den Code in seine Einzelteile (entweder im Kopf oder auf einem Stück Papier) und überlege dir, wo du landest.
2. Dein HTML scheint mir für deine Funktionalität nicht besonders gut geeignet zu sein (abgesehen davon, dass es etwas nach DIV-Suppe aussieht) - das Ganze sieht nach tabellarischen Daten aus... warum dann kein <table>?