Question 11033 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to get the content of a textarea using jquery

This questions has been asked before, however, I’m unable to find an answer for my specific scenario.

I have a few checkboxes, in which if the box is checked, I want the ‘Copy’ to copy the content of the textareas next to the checked boxes.

function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += element.nextSibling.innerText + " ";
      }
  });
  copyToClipboard(copyString);
}

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox-group">
  <div class="category">
    <input type="checkbox" id="content1" value="state" />
      <textarea class="box" id="text1">Test content 1</textarea><br>
    <input type="checkbox" id="content2" value="salePrice" />
      <textarea class="box" id="text2">Test content 2</textarea><br>
    <input type="checkbox" id="content3" value="manager" />
      <textarea class="box" id="text3">Test content 3</textarea>
  </div>
  <input id="copybtn" type="button" value="Copy" onclick="copySelect()" />
</div>

I’ve tried changing element.nextSibling.innerText to element.nextSibling.value or element.nextSibling.innerHTML, but they all return undefined.

Tags:

2

Answers


  1. 0

    You can use $(this).next().val() when loop the input checkbox

    function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += $(this).next().val() + " ";
      }
  });
  copyToClipboard(copyString);
}
    Login or Signup to reply.
  2. 0

    element.nextSibling returns any kind of node, in this case it returns a text node, You should user element .nextElementSibling to get the next element (Input, textArea, select). Then you can get the text with value.

    I corrected your code snippet.

    function copySelect() {
  var copyString="";
  $(".category>input").each(function (index, element) {
      if (element.checked) {
          copyString += element.nextElementSibling.value + " ";
      }
  });
  copyToClipboard(copyString);
}

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkbox-group">
  <div class="category">
    <input type="checkbox" id="content1" value="state" />
      <textarea class="box" id="text1">Test content 1</textarea><br>
    <input type="checkbox" id="content2" value="salePrice" />
      <textarea class="box" id="text2">Test content 2</textarea><br>
    <input type="checkbox" id="content3" value="manager" />
      <textarea class="box" id="text3">Test content 3</textarea>
  </div>
  <input id="copybtn" type="button" value="Copy" onclick="copySelect()" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search