Form Text Area creates a URL

Question

I have a pretty simple need here.

I want to have a text area, that is populated with a line of ID's - each id will be on a new line.

How can I generate a URL from that?

12345
09876

Once submitted should generate to be https://xx.com/12345&09876

I have been using this Form value creates a URL and have changed it to text area, but cant get each line break to be changed to the '&' in the url string.

Any help would be amazing!

<script type="text/javascript">
    function goToPage() {
        var page = document.getElementById('page').value;
        window.location = "https://google.com/" + page;
    }
    
</script>
<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />

I've updated my answer for your specific code. – Spectric Jul 22 '21 at 02:42 — Spectric, Jul 22 '21 at 02:42

Spectric · Answer 1 · 2021-07-22T02:41:36.350

You can split by \n to get the characters in each line and join by &, then remove the last character:

var url = txt.value.split("\n").join("&").slice(0, -1);
console.log(url);

<textarea id="txt">
12345
09876
</textarea>

In the case of a form:

txt.addEventListener('input', function(){
  form.action = txt.value.split("\n").join("&").slice(0, -1);
  console.log(form.action);
})

<textarea id="txt">
12345
09876
</textarea>
<form id="form">
<button>Submit</button>
</form>

In your particular case:

<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />
<script type="text/javascript">
    function goToPage() {
        var page = document.getElementById("page").value.split("\n").join("&");
        alert(page);
        window.location = "https://google.com/" + page;
    }
    
</script>

@user3381217 No problem. If it solves your question, please consider [accepting](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — Spectric, Jul 22 '21 at 02:47

Lumorti · Answer 2 · 2021-07-22T02:42:54.160

You can replace text in a string using the JavaScript replace function, as follows:

var newString = oldString.replace(/(\r\n|\r|\n)/g, '&');

This line takes the string variable oldString (which should contain the data with all of the linebreaks) and changes all of the linebreaks to ampersands. It uses something called a Regular Expression to find all of the line breaks.

So for your HTML:

<script type="text/javascript">
    function goToPage() {
        var page = document.getElementById('page').value;
        window.location = "https://google.com/" + page.replace(/(\r\n|\r|\n)/g, '&');
    }
    
</script>
<textarea name="textarea" style="width:250px;height:150px;" id="page"></textarea>
<input type="submit" value="submit" onclick="goToPage();" />

SkyleDc · Answer 3 · 2021-07-23T01:35:48.650

try splitting your text area by \n by doing so:

var split_text = your_text_area.split("\n"); // Replace your_text_area

The string which will be passed in the text area will be splitted by \n (newline) and every line will be inserted in the split_text variable, which is an array.

Then, you can generate a URL from the array like this:

var url = '';

for(let i = 0; i < split_text.length; i++)
{
   url += split_text[i];
   
   if((i+1) != split_text.length) // <-- Not the most optimized way to do it
   {
      url += "&";
   }
}

Form Text Area creates a URL

3 Answers3