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
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:
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다