Grabbing text and adding it to link - html

Question

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 1

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.

Answer 2

Add id of 'mylink' to your anchor tag.
<a id="mylink" class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a>
Then this code will set it. You will need to decide which event you want to trigger the setting of the href. onblur is a common one.
document.getElementById("mylink").href=document.getElementById("username").value;

Answer 3

You can use Javascript code. i give u an exemple.
<script>
(function ready() {
var input = document.getElementById('username'),
link = document.getElementById('getLink');
link.onclick = function() {
link.download = input.value + ".png";
window.open('http://mypage.com/test/' + input.value,'_blank');
}
})();
</script>
<input id="username" type="text" value="">
<a id="getLink" class="btn btn-block btn-lg btn-primary" href="">Download Image</a>