Question

How might someone fill in an input field with some text using jquery by clicking that text?

The text is generated dynamically so the value is not know ahead of time.

For example with:

<input id="tag" type="text" name="tags" value="">

<p>
    <a class="tag">aaa</a><br/>
    <a class="tag">bbb</a><br/>
    <a class="tag">ccc</a><br/>
    <a class="tag">ddd</a><br/>
    <a class="tag">eee</a>
</p>

I’m try with this

$('a.tag').live('click', function(e){
    $('#tag').val(this.innerHTML);
    return false; 
});

but this will put only one tag in the input field, i need to put something like this

<input id="tag" type="text" name="tags" value="aaa, bbb, ccc, eee">

Here is working example
http://jsfiddle.net/Kaf3V/4/

Answer 1

You can use a css class to keep track of selected links, so that you’re able to remove links already added as well.

$('a.tag').live('click', function(e){

    // toggle selected class
    $(this).toggleClass('selected');

    // make a collection of tags
    var newTag = [];
    $('a.tag.selected').each(function(){

        // add value;
        newTag.push($(this).text());
    });
    $('#tag').val(newTag.join(', '));

    return false;  
});

See the following jsFiddle for a demo.

Note: This only works if duplicates or the order that the links are clicked are not important.