Add value of input field to anchor/link tag

Question

I'd like to append/add the value of an input field entered by the to an anchor/link tag on the same page, that links to an external website.

<input type="text" name="foo">
<a id="uniqueId" href="http://example.com/{value of foo}">Click</a>

I think I need to use jQuery for this, but have no idea on how to use it in this case. Does any one have any toughts on this matter?

btw amd for security reasons the value does also need to be url encoded

Answer 1

I'd suggest, with jQuery:

 $('input[name="foo"]').on('change', function(){ var self = this, $self = $(self), link = $self.next(); link.prop('href', function(){ this.href = this.protocol + '//' + this.hostname + '/' + encodeURIComponent(self.value); }); }); 

 a::after { content: ' (' attr(href) ')'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="foo"> <a href="http://example.com/{value of foo}"> 

In response to the question, asked in the comments:

One question, Can you adapt your awnser to add a unique identifier to the anchor tag <a id="uniqueId" href="">Click</a> ?. Forgot to add this to the question

The answer is, of course, 'yes,' and it's rather simple (and more reliable than relying on the structure of the HTML and traversal), simply select the element based on its id :

$('input[name="foo"]').on('change', function(){
        var self = this,
            link = $('#uniqueId');
        link.prop('href', function(){
            this.href = this.protocol + '//' + this.hostname + encodeURIComponent(self.value);
        });
    });

 $('input[name="foo"]').on('change', function(){ var self = this, link = $('#uniqueId'); link.prop('href', function(){ this.href = this.protocol + '//' + this.hostname + '/' + encodeURIComponent(self.value); }); }); 

 a::after { content: ' (' attr(href) ')'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="foo"> <a id="uniqueId" href="http://example.com/{value of foo}"> 

Incidentally, with plain JavaScript this is still (of course) quite possible:

function appendValueToAnchor () {
  var link = document.getElementById('uniqueId'),
      protocol = link.protocol,
      newValue = encodeURIComponent( this.value );
  link.href = protocol + '//' + link.hostname + '/' + newValue;
}

var input = document.querySelector('input[name="foo"]');

input.addEventListener('change', appendValueToAnchor);

 function appendValueToAnchor () { var link = document.getElementById('uniqueId'), protocol = link.protocol, newValue = encodeURIComponent( this.value ); link.href = protocol + '//' + link.hostname + '/' + newValue; } var input = document.querySelector('input[name="foo"]'); input.addEventListener('change', appendValueToAnchor); 

 a::after { content: ' (' attr(href) ')'; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="foo"> <a id="uniqueId" href="http://example.com/{value of foo}"> 

References:

• JavaScript:
  • document.querySelector() .
  • encodeURIComponent() .
  • EventTarget.addEventListener() .
  • HTMLAnchorElement .
• jQuery:
  • next() .
  • on() .

Answer 2

Well, you can do this

$('[name=foo]').blur(function(){
   $('a').attr("href", encodeURIComponent("http://domain.com/" + $(this).val()));
});

The above will assign the value once the input loses the focus.

Answer 3

You can simply use the following

$(function(){

    $('input[name=foo]').on("change",function(){

        var $input = $(this); 
        $('#uniqueId').prop("href","http://example.com/"+$input.val());
        });

    });
});

<input type="text" name="foo"></input>
<a id="uniqueId" href="http://example.com/{value of foo}">Click</a>

hope it helps...

Answer 4

My use case is slightly different in that rather than relying on manual input, appending two links on a page with a value stored hidden form field.