CODEWITHSUNDEEP
jquery
Miguel Moura
Miguel Moura

Reputation: 39484

Add content to textarea when clicking anchor

I have the following on a html page:

<div class="group>
  <textarea id="data" cols="20" rows="20"/>
  <a href="#" data-template="Some text">Use template</a> 
</div>

When I click the A tag I would like to fill the textarea under the same with the text included in its data-template.

How can I do this using JQuery?

Thank You, Miguel

Upvotes: 1

Views: 214

Answers (3)

RienNeVaPlu͢s
RienNeVaPlu͢s

Reputation: 7642

Or just

$('.group a').click(function(){
    $('#data').val($(this).data('template'));
});

Fiddle

Upvotes: 2

Ani
Ani

Reputation: 4523

JS

$('#mylink').click(function() { 
    var text = $(this).attr("data-template")
    $('#data').append(text); 

});

HTML: Add id to Anchor tag

<a id="mylink" href="#" data-template="Some text">Use template</a>

Upvotes: 0

scrowler
scrowler

Reputation: 24425

Firstly, you'll need to give the anchor an identifier of some sort:

<div class="group">
    <textarea id="data" cols="20" rows="20"/>
    <a id="yourid" href="#" data-template="Some text">Use template</a> 
</div>

... then you can use jQuery's append method:

$('#yourid').click(function(e) {
    e.preventDefault(); // stop the default click action
    var template = $(this).attr('data-template'); // Some text
    $('#data').append(template); // add to the textarea
});

You'll probably need to play around with how it formats it, maybe add in some line breaks before or after the appended content if you want to keep it on separate lines, e.g.:

$('#data').append("\n" + template);

Upvotes: 0

Related Questions