How to get data from textarea HTML tag in an array and then loop through it?

Question

I'm creating a webpage which would collect links from the user and simply open every link in a new tab. For collecting links I am using HTML's <textarea> tag with a submit button.

User is expected to give only one link for each line

https://google.com
https://stackoverflow.com
https://facebook.com

I would open links by sending each passing each URL through this function.

function open(url) {
  var open= window.open(url, '_blank');
  open.focus();
}

But how exactly to run loop? How to get values from textarea in an array and then run a loop which would send value at every index to this function?

If you think this could be done in a better than other than this, feel free to add your method.

Welcome to StackOverflow! Please make sure to add a minimal verifiable code snippet for others to take a look and understand your problem. For more details on how to create [mcve] — nircraft, Dec 02 '19 at 17:16
I have already added the function in JS code. The only thing in JS code would be this function and looping. And looping is what I can't figure out how to do. So only added this. — Joi, Dec 02 '19 at 17:18
Not all top-rated answers are good: https://stackoverflow.com/a/11384018/661872 the second param which is using `_blank` is actually the [name](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) of the window and has nothing to do with the target prop. `window.open(url, url);` will work, but you wont want to focus on them all — Lawrence Cherone, Dec 02 '19 at 17:23
Thanks for pointing it out, but am curious how did you found that I learnt about this function from top rated answer on SO, a quick google search? — Joi, Dec 02 '19 at 17:28
Does this answer your question? [How to read line by line of a text area HTML tag](https://stackoverflow.com/questions/9196954/how-to-read-line-by-line-of-a-text-area-html-tag) — Ankit, Dec 02 '19 at 17:29
@Ankit how to properly loop, I got the answer about getting data from textarea but can't understand loop here. — Joi, Dec 02 '19 at 17:33
I have added the answer, check and let me know if you get stuck. — Ankit, Dec 02 '19 at 17:37
@joi yes I believe he did a quick google search for the snippet you posted. When I did, I got the same top answer too. — Curious Mind, Dec 02 '19 at 17:39
The accepted answer to Ankit's proposed duplicate loops over the array in the answer... — Heretic Monkey, Dec 02 '19 at 17:42

keyhan · Answer 1 · 2019-12-02T17:30:27.410

It would help if you gave your textarea a unique identifier, this way we can get at its contents easily. i.e, <textarea id="linksInput">...</textarea>

Then we can do

let links = document.getElementById("linksInput").value.split("\n");

We get the value in the textarea and split it at every newline character ("\n"), getting our individual links in an array, with each element being a single line from the original textarea value. Now we can loop through the array links.

for (let i = 0; i < links.length; i++) {
    open(links[i]);
}

nircraft · Answer 2 · 2019-12-02T18:01:04.460

You can add an id to the text field and use javascript to get the value of TextArea.

Since you are looking at multiple values separated by "/n", you will have to split the text and loop over the result.

function submitText() {
  var textVal = document.getElementById("txtarea").value;

  textVal = textVal.split('\n');

  if (textVal.length > 0) {
    for (const element of textVal) {
      console.log(element);
      window.open(element, "_blank");
    }

  }
}

<textarea id="txtarea"></textarea>

<button type="button" onclick="submitText()">Submit</button>

score 0 · Answer 3 · answered Dec 02 '19 at 17:36

You can use the below code to get your result.

HTML

<textarea id='links'>
</textarea>

<button id='trigger'> Get value </button>

JS

document.addEventListener('DOMContentLoaded', () =>{

const ta = document.getElementById('links')
const button = document.getElementById('trigger')

button.addEventListener('click', () => {
 const list = ta.value.split('\n')
 forEach(let i=0; i < list.length; i++) {
   window.open(list[0], "_blank");
  }
})
})

How to get data from textarea HTML tag in an array and then loop through it?

3 Answers3