使用jQuery将文本字段值附加到URL
Append text field value to URL using jQuery
我有一个URL列表:
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()
可以做到这一点,但我不确定如何使用它。
如果您希望它立即更新:
<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()
事件运行该功能 - 修改keyup上url元素的
.text()
- 修改url元素的
'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" />
相关文章:
- 如何用URL预填充wufoo字段
- 强制URL字段不具有“;http://www."使用regex
- 如果表单中的空字段使用Javascript从URL中排除
- 如何存储&读取输入字段中的任意url
- 验证多个URL输入字段
- I'm试图创建一个html表单,根据字段的输入生成url地址
- OData:对url请求中的数字(ID)字段进行通配符(startswith)筛选
- 如何使用 Angular.js/Javascript 为 url 添加输入字段验证
- jQuery 键下处理程序在 IE11 的 URL 字段中按 Ctrl 时接收键下事件
- 带有使用其字段之一动态构造的 URL 的轨道表单
- 使用 Javascript 捕获值输入字段并将其放在目标 URL 中
- 使用 jQuery 验证 URL 和域字段
- 从 URL 变量填充电子邮件字段
- 输入字段中URL中的主干插入值
- Button获胜't在验证3个输入字段后,将我带到下一个URL
- 如何使用对话框/提要javascript在Facebook的描述字段中添加URL
- 在提交IFRAME表单之前,请将父url保存到隐藏字段
- 从wordpress视频URL字段(在JW播放器脚本中)获得Javascript中的值
- 是否有可能在ajax调用中将函数传递给url字段?
- 使用jQuery的AJAX调用中url字段的格式