Html - copy multiple textareas with same button

AbessiSofiene
June 25, 2024
91 views
1 vote
2 Answers

I wrote this code to copy multiple textareas’ content with a unique button, but only the first textarea is copied.

 var copyText = document.getElementsByClassName("form-control")[0];
 function myFunction() {

     // Get the text field

     // Select the text field
     copyText.select();
     copyText.setSelectionRange(0, 99999); // For mobile devices

     // Copy the text inside the text field
     document.execCommand("copy");

     // Alert the copied text
     alert("Copied the text: " + copyText.value);

     ///second

 }

<textarea class="form-control" tabindex="0">something</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control"tabindex="3" >something1</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control" >something2</textarea>
 <button onclick="myFunction()">clickme</button>

How can I resolve this issue so that multiple textareas are copied, instead?

Answers

To duplicate the text, from text boxes using one button you must iterate through all the text boxes and replicate their content. Here is how you can adjust your JavaScript function to accomplish this;

Utilize getElementsByClassName to retrieve all the elements labeled "form control".
Go through each text box individually. Duplicate its content.

 function myFunction() {
        // Get all textareas with class 'form-control'
        var textAreas = document.getElementsByClassName("form-control");

        // Loop through each textarea
        for (var i = 0; i < textAreas.length; i++) {
            var copyText = textAreas[i];

            // Select the text field
            copyText.select();
            copyText.setSelectionRange(0, 99999); // For mobile devices

            // Copy the text inside the text field
            document.execCommand("copy");

            // Optional: Alert the copied text for each textarea
            alert("Copied the text: " + copyText.value);
        }
    }

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Textareas</title>
</head>
<body>

<textarea class="form-control" tabindex="0">something</textarea>
<button onclick="myFunction()">Click me to copy all</button>
<textarea class="form-control" tabindex="3">something1</textarea>
<textarea class="form-control">something2</textarea>


</body>
</html>

I strongly suggest you delegate. Right now you only select the very first field on purpose

Here any click on a button with class="copy" in the container div will copy the textarea before it

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('container').addEventListener('click', (e) => {
    const tgt = e.target.closest('button.copy'); // get the button
    if (!tgt) return // not a button

    // Select the text field    
    const field = tgt.previousElementSibling;
    field.select();
    field.setSelectionRange(0, 99999); // For mobile devices
    // Copy the text inside the text field
    document.execCommand("copy");
    // Alert the copied text
    alert("Copied the text: " + field.value);
  });
});

<div id="container">
  <textarea class="form-control" tabindex="1">something 1</textarea>
  <button class="copy">clickme</button>
  <textarea class="form-control" tabindex="2">something 2</textarea>
  <button class="copy">clickme</button>
  <textarea class="form-control" tabindex="3">something 3</textarea>
  <button class="copy">clickme</button>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – copy multiple textareas with same button

Answers