[英]Append text field value to URL using jQuery
我有一个网址列表:
localhost/action/add/234
localhost/action/add/244
localhost/action/add/334
localhost/action/add/254
在这些值的前面有一个文本框,当在框中键入一个值时,我想将其附加到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
有人可以解释我该怎么做吗? 我发现可以使用.val()
来做到这.val()
但是我不确定如何使用它。
如果要立即更新:
<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>
这里的关键是
.keyup()
事件运行该函数 .text()
'href'
属性,以使链接与文本匹配 通常, .val()
用于设置/获取输入元素的值,例如文本框^或下拉列表
假设您想将在文本字段中键入的文本附加到href(URL)。 我认为我们可以使其更简单。
这是有效的解决方案。
$(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.