Ergebnis 1 bis 5 von 5
  1. #1
    _chris ist offline Grünschnabel
    registriert
    15-07-2010
    Beiträge
    2

    Formular dynamisch erweitern/verschachtelte div's

    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.

    HTML-Code:
        <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 -->
    HTML-Code:
        <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.
    PHP-Code:
    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
    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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Formular dynamisch erweitern/verschachtelte div's

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

  3. #3
    _chris ist offline Grünschnabel
    registriert
    15-07-2010
    Beiträge
    2

    AW: Formular dynamisch erweitern/verschachtelte div's

    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

    HTML-Code:
    <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!

  4. #4
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Formular dynamisch erweitern/verschachtelte div's

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

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Formular dynamisch erweitern/verschachtelte div's

    1.
    Code:
    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>?

Ähnliche Themen

  1. Einfache Frage zu DIV's dynamisch erzeugen
    Von BettinaSyn im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 02-07-2009, 16:37
  2. div dynamisch erweitern
    Von obilix im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 05-03-2009, 14:39
  3. Formular dynamisch erweitern mit Tab-Taste
    Von peter_muc im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 21-04-2005, 15:27
  4. text dynamisch erweitern
    Von topper23 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 22-01-2005, 23:31
  5. Tabelle dynamisch erweitern
    Von artw im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 15-11-2004, 14:38

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •