Input to populate textarea - Javascript

Question

I am making a coupon code page and i am struck in one thing, Maybe its easy for javascript buddies.The problem is

All output links are in one line, I want each link in different text area and able to copy from textarea

HTML Markup

   <p>Enter your email or User ID 
       <input type="text" name="foo" id="foosite" value="" />
   </p>

  <a href="#" id='link' target="_blank">send</a>
  <div id="url_value"></div>

Javscript Code

var a = document.getElementById('link')
a.onclick = function(e){
    e.preventDefault();
    var value = document.getElementById('foosite').value;
    var route = "http://www.domain.com/route.php?email=" + value + ',  ';
    var data = "http://www.domain.com/data.php?email=" + value + ',  ';
    var form = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('url_value').innerHTML = route + data + form
}

From the above code, Its generate all links in one line and looks ugly, I need it to show in 3 different textareas.

Like this Html

<p>Link 1</p>
<textarea name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea name="form"> Output Link</textarea>

Easiest way is adding `id` props to textareas and then use e.g. `document.getElementById('route').value = route`. — Majid Fouladpour, Jan 19 '14 at 17:38

Rayan Bouajram · Accepted Answer · 2014-01-19T17:46:43.460

0

The issue with your code is this line:

document.getElementById('url_value').innerHTML = route + data + form;

What you're doing is injecting the DOM with all your links as one single line with no spaces between them.

The solution is to make a view for the results, and then inject them into the DOM afterwards as shown here:

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    var routeView = '<p>Link 1</p><textarea name="route">'+routeLink+'</textarea>';
    var dataView = '<p>Link 2</p><textarea name="data">'+dataLink+'</textarea>';
    var formView = '<p>Link 3</p><textarea name="form">'+formLink+'</textarea>';

    document.getElementById('url_value').innerHTML = routeView + dataView + formView;
}

UPDATE:

If the HTML already exists, add IDs to your textarea fields.

<p>Link 1</p>
<textarea id="routeValue" name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea id="dataValue" name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea id="formValue" name="form"> Output Link</textarea>

Replace your JS with this code:

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('routeValue').innerHTML = routeLink;
    document.getElementById('dataValue').innerHTML = dataLink;
    document.getElementById('formValue').innerHTML = formLink;
}

edited Jan 19 '14 at 17:46

answered Jan 19 '14 at 17:37

Rayan Bouajram

743
5
12

Thank you so much for your answer, But I need it to populate the textarea which is already on page which placeholder of " links will be generated here" I need it to change with links upon input submit! does that make sence? – user3178681 Jan 19 '14 at 17:40
@user3178681 If the textarea is already on the page, then you can try my updated method. If that's not what you meant, then you'll need to clarify and be more specific as to what you want to achieve... I've posted both solutions on here. – Rayan Bouajram Jan 19 '14 at 17:47
Yes, That's what i meant and needed!Super quick solution. Thank you so much. One more thing, Can i transform the send link to button? It is handing as link but is that possible to make it a button with css ID or class to customise without affecting the js code? – user3178681 Jan 19 '14 at 18:00
@user3178681 If you do a quick search on the internet, you'll find your solution. Here's one: http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button ... glad I could help, please don't forget to hit accept if you've found this answer useful :) – Rayan Bouajram Jan 19 '14 at 18:04
Nevermind, I found the solution by myself. , i was not sure that if that break the js code. Yes, This helps alot and Thank you once again Rayan :) I am accepting your question now and I know i am expecting too much but is there is any quick & easy way to add copy to clipboard in the textareas without affecting the currect js? :) – user3178681 Jan 19 '14 at 18:12
@user3178681 to copy to the clipboard you'll need to have flash installed (since the page cannot access copy/paste via js). A simple search on Stack Overflow will provide you with answers... or, you can start a new question -- I'm sure others can benefit from that. Good luck! – Rayan Bouajram Jan 19 '14 at 18:21

Input to populate textarea - Javascript

1 Answers1