Javascript to Jquery, add text in input onclick

Question

How can I change this javascript code to JQuery.

<script type="text/javascript">
   function addTextTag(text){
    document.getElementById('text_tag_input').value += text;
   }        
</script>

When a user click the link text automaticaly is added in input.

This is the HTML:

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#" onClick="addTextTag('text1, '); return false">text1</a>
    <a href="#" onClick="addTextTag('text2, '); return false">text2</a>
    <a href="#" onClick="addTextTag('text3, '); return false">text3</a>
</div>

Here is the demo: http://jsfiddle.net/Smartik/j8qGT/

Darin Dimitrov · Accepted Answer · 2012-02-26 10:22:09Z

14

<script type="text/javascript">
    $(function() {
        $('.tags_select a').click(function() {
            var value = $(this).text();
            var input = $('#text_tag_input');
            input.val(input.val() + value + ', ');
            return false;
        });
    });
</script>

and your markup:

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

and here's a live demo.

answered Feb 26, 2012 at 10:22

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthony Grist Over a year ago

That replaces the text in the text input, rather than appending the new text. May also be a good idea to use .text() rather than .html() just in case there are additional HTML tags inside the anchor.

Bojangles · Accepted Answer · 2012-02-26 10:34:52Z

3

Without inline javascript, completely jQuery: http://jsfiddle.net/j8qGT/3/

JavaScript:

$('a').click(function(){
    $('#text_tag_input').val($('#text_tag_input').val()+$(this).html()+', ');
});

HTML:

<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a href="#">text1</a>
    <a href="#">text2</a>
    <a href="#">text3</a>
</div>

edited Feb 26, 2012 at 10:34

Bojangles

102k50 gold badges175 silver badges209 bronze badges

answered Feb 26, 2012 at 10:24

Alex

6,4362 gold badges22 silver badges26 bronze badges

Comments

Didier Ghys · Accepted Answer · 2012-02-26 10:31:34Z

Some notes on the steps:

select already the input where to set the value so you avoid the need to re-query for it all the time: var $tagsInput = $('#text_tag_input');. The hash tag selector if the ID selector in jQuery, replaces document.getElementById
bind a click event with .click() for links within element with class "tags_select": `$('.tags_select a').click(...);``
To append the value, instead of struggling with jquery methods to get and set the value of the input, get the native DOM element with [0] on $tagsInput and use the += notation of the property value.

Here's the code:

// select already you input element for re-use
var $tagsInput = $('#text_tag_input');

// bind a click event to links within ".tags-select" element
$('.tags_select a').click(function() {
    // append link text to the input field value
    $tagsInput[0].value += $(this).text();
    return false;
});

DEMO

Collectives™ on Stack Overflow

Javascript to Jquery, add text in input onclick

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related