UXRO UXRO -4 years ago 82
HTML Question

Grabbing text and adding it to link

Is there a way to grab text from input area and put it to the end of "href" link and to "download=''" area? I added example below:

Code:

<input id="username" type="text" value="">

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/(textarea text here)" download="(textarea text here).png">Download Image</a>


Result when user enter text:

<input id="username" type="text" value="Monster">

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>


Thanks for suggestions.

Answer Source

I've created a fiddle with a possible solution. might be minimized if you want to get rid of the variables declarations, but I like my code clean. https://jsfiddle.net/sctvdL0h/1/

Html

<input id="username" type="text" value="">

<a class="btn btn-block btn-lg btn-primary" href="" download="(textarea text here).png" id="download_link">Download Image</a>

JS

var input = document.getElementById("username");
var downloadLink = document.getElementById("download_link");
var baseLink = 'http://mypage.com/test/';
var baseFormat = '.png';

var updateLink = function() {
  var currentValue = input.value;
  downloadLink.href  = baseLink + currentValue.toString();
  downloadLink.setAttribute('download', currentValue.toString() + baseFormat); 
};
input.addEventListener("keyup", function() {
  updateLink();
});
input.addEventListener("change", function() {
  updateLink();
});

In this way you can do it configurable (change url and file extension also). This is just a possible solution not the only one.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download