This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HTML DOM Element cloneNode()
#1
Hallo 

Ich habe folgendes Problem 

ich würde gerne 2 inputfelder und 2 selectfelder über einen button kopieren. 
das funktioniert soweit auch ganz gut. 

Jedoch ist das problem jetzt das ich bei meinen 2 selectboxen entweder keinen inhalt habe oder aber ich nichts selectieren kann. 
Das Problem einmal visuell als gif 
https://gifyu.com/image/S3Q1Q

HTML
<section class="mb-3" id="SchadenortabweichendSection" style="display: none">
                                    <div class="card">
                                        <h5 class="card-header">Schadensort Abweichend
                                            <button class="btn btn-primary" type="button" onclick="myFunction()">Copy
                                            </button>
                                        </h5>
                                        <div class="card-body">
                                            <div id="tocopy">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <input name="form_schadenortabweichend_name[]"
                                                                       type="text" class="form-control"
                                                                       placeholder="Vorname/Nachname">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <select class="bootstrap-select"
                                                            name="schadenort_ansprechpartner_six_geschoss[]">
                                                            <option value="">Geschoss</option>
                                                            <option value="KG">KG</option>
                                                            <option value="UG">UG</option>
                                                            <option value="EG">EG</option>
                                                            <option value="1. OG">1. OG</option>
                                                            <option value="2. OG">2. OG</option>
                                                            <option value="3. OG">3. OG</option>
                                                            <option value="4. OG">4. OG</option>
                                                            <option value="5. OG">5. OG</option>
                                                            <option value="6. OG">6. OG</option>
                                                            <option value="7. OG">7. OG</option>
                                                            <option value="8. OG">8. OG</option>
                                                            <option value="9. OG">9. OG</option>
                                                            <option value="10. OG">10. OG</option>
                                                            <option value="11. OG">11. OG</option>
                                                            <option value="12. OG">12. OG</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <select class="bootstrap-select"
                                                                    name="schadenort_ansprechpartner_six_lage[]">
                                                                <option value="">Lage in der Etage</option>
                                                                <option value="Links">Links</option>
                                                                <option value="Mitte">Mitte</option>
                                                                <option value="Rechts">Rechts</option>
                                                                <option value="Mitte Links">Mitte Links</option>
                                                                <option value="Mitte Rechts">Mitte Rechts
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <div class="form-group">
                                                            <div class="input-group">
                                                                <input name="schadenort_ansprechpartner_six_telefon[]"
                                                                       type="text" class="form-control"
                                                                       placeholder="Telefon/Mobil">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Weitere Adressen -->
                                            <div id="toinsert"></div>
                                        </div>
                                    </div>

                                </section>


JS



[url=https://www.basicthinking.de/blog/2018/05/03/gif-erstellen/][/url]
Zitieren
#2
Irgendwie wir der JS Code nicht angezeigt leider kann ich diesen beitrag auch nicht mehr bearbeiten. 

        function myFunction() {
            const node = document.getElementById("tocopy");
            const clone = node.cloneNode(true);
            document.getElementById("toinsert").appendChild(clone);
        }


ich würde mich sehr freuen wenn mit jemand helfen könnte. 
vielen lieben dank. Wink
Als Lösung markieren Zitieren
#3
Hi enteR,
du solltest ersteinmal nicht die ID mit-klonen. Wenn eine ID zweimal vorkommt, kann es zu Fehlern kommen. Hier würde ich dir empfehlen mit Klassen zu arbeiten. Was du auch machen kannst ist ein neues SELECT-Element zu erstellen und nur die Kind-Elemente zu klonen, aber auch hier Klassen verwenden zum selektieren.

Wenn du damit nicht weiter kommst, dann einfach ins Forum schreiben. Wir finden eine Lösung.

Viel Erfolg

rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste