使用javascript或jquery将具有相同id的多个文本区域内容复制到剪贴板

I have 3 bootstrap modals with individual textareas displaying checked box values in textareas in the respective modal's textarea.

我有3个bootstrap模态,单独的textareas在相应模态的textarea中显示textareas中的复选框值。

(I have a jquery capturing the checkbox values and putting them in the respective texareas. so it is working fine)

(我有一个jquery捕获复选框值并将它们放在相应的texareas中。所以它工作正常)

But I have put a copy button in each modal which opens a onclick even that points to a function to copy the respective textarea contents to clipboard. But only the first modal values are copied. When I click the copy buttons on the other modals, the values are not copied. Is there something that i'm missing.

但是我在每个模态中放了一个复制按钮,打开一个onclick,甚至指向一个函数将相应的textarea内容复制到剪贴板。但只复制了第一个模态值。当我单击其他模态上的复制按钮时,不会复制这些值。有什么我想念的东西。

the textarea is capturing the checkid from the divs. so the textarea is having id as checkid. the copy button is actioned to copy the textarea contents. but the copy button from the first modal works and not other modal.

textarea正在从div中捕获checkid。所以textarea的id为checkid。复制按钮用于复制textarea内容。但是第一个模态的复制按钮起作用而不是其他模态。

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 --------------------------------------------------------------'); 
 });	

//Touch does not respond	
$("#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. -->

更多相关文章

随机推荐