(Basic jquery) pass the text of a link to a textbox

Question

Hi there, this is a really basic jQuery question, but i'm not sure how to do this:

<input type=text class=city />
<ul class="cityList">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

What I want to do is to just get the Text (Test 1, 2 etc) of any clicked li a and put into the textbox

Answer 1

The following will do what you want.

$('.cityList a').click(function (e) {
  $('input.city').val($(this).text());
  e.preventDefault();
});

How it Works

$('.cityList a') returns an array of elements, bound with jQuery, that match the selector. In this case, all the links within any elements with a class of cityList.

.click(...) adds an event to all items called upon, which is the previous array.

function(){} is an anonymous function. When called, this is the element that has been clicked on. (Remember, this function represents the event we're binding.)

$('input.city') finds the textbox with the given class, but it could be multiple boxes. To prevent that, give it an ID in the HTML and change the selector to "#myID".

.val(...) sets the value of the textbox to the first parameter.

$(this).text() will return the text of the link, which will be set as the textbox's value (represented by the above code-ellipsis).

e.preventDefault(); stops the browser from visiting the link that was just clicked. (However, this method will cancel any default behavior for any event.)

Answer 2

$('.cityList a').click(function(event)
{
    event.preventDefault();
    $('input.city').val($(this).text());
});

You might want to give your input an id so it's easier to target. It'll need a "name" as well when you submit it.

<input type="text" class="city" name="city" id="city"/>

The the query would be:

$('#city').val();

Answer 3

First, you want to use the CSS selector syntax to find those links, which would be .citylist li a. From there you bind to the click event on each of those elements. jQuery is nice in that you can bind the same event to multiple DOM elements, which means that rather than iterating over the results of that selector you just make one call and it's done for all of them (so $('.citylist li a').click(callback); is all you need).

You pass a callback to the click function, which should handle updating the text. When jQuery executes the callback, it defines this to be the object that triggered the event, which makes it easy to grab the text, by simply calling $(this).text().

From there you just update the textbox's text by calling its val function.

Put it all together and you get something like this:

$('.citylist li a').click(function(e)
{
    $('input.city').val($(this).text())
    e.preventDefault();
});