Copying Multiple Text Fields

Question

Since COVID hit I started trying to learn some programming. I started learning C# and was able to build a computer app (not a good one, but it worked). This is just for fun and has been a blast trying to figure it out how all this works, but now I'm stuck... I now wanted to try to build the same type of thing but on a website.

Basically I want this.

TextBox1: "UserInput1"

TextBox2: "UserInput2"

TextBox3: "UserInput3"

[Copy Button]

When the user presses the copy button it copies the "UserInput" text to the users clipboard. Formatted like below.

"UserInput1", "UserInput2", "UserInput3"

Thanks to w3schools I was able to find this solution.

<html>
<body>

<input type="text" value="UserInput1" id="myInput">
<button onclick="myFunction()">Copy Button</button>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>

Now if I want to add multiple text boxes to be copied how to do you program that? Below is how my brain thinks it should work, but doing this only copies the first UserInput.

<html>
<body>

<input type="text" value="UserInput1" id="myInput1">
<input type="text" value="UserInput2" id="myInput2">
<input type="text" value="UserInput3" id="myInput3">
<button onclick="myFunction()">Copy Button</button>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput1","myInput2", "myInput3");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

</body>
</html>

I'm sorry if this is an extremely dumb question but through all of my googling I cannot find a solution. I'm not looking a programming hand out here, but I am looking for an explanation on why this is not working, and what path I should go down to find a solution. Any help would be greatly appreciated.

If it is not possible to copy multiple text fields is it possible to have all "UserInput" fields fill in to one hidden text box that the the copy button copies from?

I don't see why it wouldn't work. It could be when you're trying to find them by ElementId. Html and elements are in my experience very commonly buggy or hard to find. Check if there's another function you can use. Like maybe instead of this -> var copyText = document.getElementById("myInput1","myInput2", "myInput3"); you can find a getAllInputs..or so on. See if you can find an alternative. That's how I've solved previous problems with Html. — GamingFelix, Dec 07 '20 at 22:44
Like for example, when finding Forms in the past while webscraping a website. To find it I'd use something like "getAllForms". Then iterate over the list of all forms to find the one I need. — GamingFelix, Dec 07 '20 at 22:44
first learn that : https://en.wikipedia.org/wiki/Java_(programming_language) — Mister Jojo, Dec 07 '20 at 22:57

score 2 · Answer 1 · answered Dec 07 '20 at 23:44

First of all, document.getElementById is used to get a single element with a specific id. If you want multiple elements, you should use querySelectorAll() or getElementsByClassName().

Secondly, the select() method will select the text of a single input field. You cannot use it on a collection of elements.

The solution is not straightforward, because some implementations are not supported by some browser. So depending on your needs, you might want to look at different options.

See if this can help you: How do I copy to the clipboard in JavaScript?

score 1 · Answer 2 · answered Dec 08 '20 at 04:32

// Create an array
let arr = [];
// Get the inputs by 'querySelectorAll'
let myInputs = document.querySelectorAll('#theInputs input');

function myFunction() {
// Loop through the inputs
  for(let i = 0; i < myInputs.length; i++){
    // Push the inputs value to the array
    arr.push(myInputs[i].value + " ");
  }
  // Alert the array
  alert(arr);
}

<div id="theInputs">
  <input type="text" value="UserInput1" id="myInput1">
  <input type="text" value="UserInput2" id="myInput2">
  <input type="text" value="UserInput3" id="myInput3">
</div>

<button onclick="myFunction()">Copy Button</button>

Copying Multiple Text Fields

2 Answers2