[英]Append text field value to URL using jQuery
I have a list of URLs: 我有一个网址列表:
localhost/action/add/234
localhost/action/add/244
localhost/action/add/334
localhost/action/add/254
In front of these values there is a text box, and when a value is typed into the box I want to append it to the end of the URL. 在这些值的前面有一个文本框,当在框中键入一个值时,我想将其附加到URL的末尾。
localhost/action/add/234/test text1
localhost/action/add/244/test text2
localhost/action/add/334/test text3
localhost/action/add/254/test text4
Can someone explain me how can I do it? 有人可以解释我该怎么做吗? I found out that its possible to do it using
.val()
but I'm unsure how to use it. 我发现可以使用
.val()
来做到这.val()
但是我不确定如何使用它。
If you want it to update immediately: 如果要立即更新:
<script>
$(function(){
var a = $('#url').text();
$('#textbox').keyup(function(){
var b = $('#textbox').val();
$('#url').text(a + '/test ' + b);
$('#url').attr('href', a + '/test ' + b);
});
});
</script>
<input id='textbox' type='text'></input>
<a href="localhost/action/add/234" id='url'>localhost/action/add/234</a>
The key things here are 这里的关键是
.keyup()
event to run the function whenever a keyboard key is released .keyup()
事件运行该函数 .text()
of the url element on keyup .text()
'href'
attribute of the url element so that the link matches the text 'href'
属性,以使链接与文本匹配 Normally .val()
is used to set/get the value of input elements, like the text box ^, or a dropdown 通常,
.val()
用于设置/获取输入元素的值,例如文本框^或下拉列表
Assuming, you want to append the text that you typed in the textfield to the href (URL). 假设您想将在文本字段中键入的文本附加到href(URL)。 I think we can make it more simple.
我认为我们可以使其更简单。
Here is the working solution. 这是有效的解决方案。
$(document).ready(function(){ $('#search').on('click', function(e) { var search_url = e.originalEvent.currentTarget.href; //or else you can grab the URL anywhere from your DOM; e.originalEvent.currentTarget.href = search_url + $('#search_term').val(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search_term" placeholder="Search..StackOverflow" /> <a href="https://stackoverflow.com/search?q=" id="search">Search </a>
$(function(){ var currVal = $('.url').text(); $('input[type="text"]').keydown(function() { $('.url').text(currVal.trim()+$(this).val().trim()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="url"> localhost/action/add/234 </span> <input type="text" id="search_term" placeholder="blabla" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.