+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: HTML DOM Element cloneNode() (/showthread.php?tid=1508)
HTML DOM Element cloneNode() - enteR - 24.09.2022
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
Code:
<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]
RE: HTML DOM Element cloneNode() - enteR - 24.09.2022
Irgendwie wir der JS Code nicht angezeigt leider kann ich diesen beitrag auch nicht mehr bearbeiten.
Code:
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.
RE: HTML DOM Element cloneNode() - rzscout - 25.09.2022
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