kopiere mehrere Text-Bereich Inhalte mit derselben ID in die Zwischenablage mit Javascript oder jquery

Question

Ich habe 3 Bootstrap-Modal mit einzelnen Textareas Anzeige von Checkbox-Werten in Textareas in den entsprechenden Modal Textarea.

(Ich habe eine Jquery die Checkbox Werte zu erfassen und sie in der jeweiligen texareas setzen. So es gut funktioniert)

Aber ich habe eine Kopie Taste in jedem modal setzen, die eine Onclick sogar, dass Punkte auf einem eröffnet Funktion zum Kopieren des jeweiligen Textarea-Inhalts in die Zwischenablage. Aber nur die ersten modalen Werte werden kopiert. Wenn ich auf die Kopierschaltflächen der anderen Modale klicke, werden die Werte nicht kopiert. Gibt es etwas, das ich vermisse?

Die Textarea fängt die checkid von den divs. Also hat das Textfeld seine ID als Checkid. Der Copy-Button wird aktiviert, um den Textarea-Inhalt zu kopieren. aber die Kopierschaltfläche vom ersten Modal funktioniert und nicht anderes Modal.

function CopyNotes() { 
 

 
var DataSet = document.getElementByID('checkid').value; 
 

 
window.clipboardData.setData("TEXT", DataSet); 
 

 
} 
 

 

 
/* copying checkid */ 
 

 
$("#button1").click(function() { var p=$("#MaybeResolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again. \n --------------------------------------------------------------'); 
 
}); \t 
 

 
//Touch does not respond \t 
 
$("#button2").click(function() { var p=$("#Resolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again! \n --------------------------------------------------------------'); 
 
}); 
 
    
 
$("#button3").click(function() { var p=$("#Unresolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play"); 
 
$.each($("input[name='Sport1']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thanks for contacting us.\n . \n --------------------------------------------------------------'); 
 
}); 
 

 
$("#button4").click(function() { var p=$("#MaybeResolved #checkid"); $(p).html("Cx Verified " + '\n' + "The Following sports I play:"); 
 
$.each($("input[name='Sport1']:checked"), function() { 
 
$(p).html($(p).html() + '\n' + $(this).val()); }); 
 
$(p).html($(p).html() + '\n --------------------------------------------------------------\n Thank you see you again. \n --------------------------------------------------------------'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- bootstrap modal 1 --> 
 

 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 
<!-- bootstrap modal 2 --> 
 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 
<!-- bootstrap modal 3 --> 
 

 
<textarea class="form-control" id="checkid" style="min-width: 100%" rows = "20"> 
 
</textarea> 
 
<button class="btn btn-success btn-md" type="button" id="copy-button" data-toggle="tooltip" data-placement="button" title="Copy to Clipboard" onclick = "CopyNotes()">Copy</button> 
 

 

 

 
<!---- Divs that get check box ids --> 
 

 

 
<!--- div 1 --> 
 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="sport"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 

 
<!--- div 2--> 
 

 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport1"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="spor1t"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport1"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport1"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport1"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport1"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button3" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button4" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 

 

 
<!-- div3---> 
 
<!-- other div and so on.---> 
 
<!--- the content is similar but also has addition checkboxes. -->

Answer 1

Element-IDs sollen einzigartig sein. JavaScript hängt nur an den ersten Selektor an, da nur ein Element erwartet wird. Benutze stattdessen die Klasse!

Answer 2

Zunächst sollten Ihre IDs alle eindeutige Namen haben, genau wie IDs verwendet werden sollen.

Um Ihre Frage zu beantworten, wie Sie alle Werte aus mehreren Textfeldern erhalten, können Sie stattdessen auf Ihre Klasse abzielen.

Damit enthält Ihre DataSet-Variable ein Array Ihrer Textarea-Werte, auf die Sie so zugreifen können.

Ich bin mir nicht sicher, dass das, was Sie suchen, obwohl, da Sie 3 Textareas und 3 Tasten haben. Wenn Sie jedoch Ihre IDs so ändern, dass sie eindeutig sind, könnte Ihr ursprünglicher Code auch verwendet werden, um Ihre 3 separaten Textareas mit ein paar Wiederholungen individuell anzusprechen.

Answer 3

Ich löste das Problem. Ich verwende jetzt ein Modal, um die Kontrollkästchenwerte anzuzeigen. Dann benutze eine jquery, um das Textfeld zu löschen und basierend auf den Klicks auf die Schaltfläche anzuzeigen. Jetzt hat die Copy Fiction nur noch einen Selektor und der Inhalt wird kopiert. Jetzt kann jemand dies in jquery-Syntax konvertieren. Danke im Voraus.

function CopyNotes() { 
 

 
var DataSet = document.getElementByID('checkid').value; 
 

 
window.clipboardData.setData("TEXT", DataSet); 
 
}