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.
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.
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 .text()
of the url element on keyup 'href'
attribute of the url element so that the link matches the text Normally .val()
is used to set/get the value of input elements, like the text box ^, or a dropdown
Assuming, you want to append the text that you typed in the textfield to the 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" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.