Here is my code:

<a href="">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

<textarea rows="5" cols="40" name="replycontent" id="replycontent">Hello World</textarea>

I want to insert text at the end of the textarea by the click of a link. So if you click on the Test 1 link, it will insert Thank you and so on. The solution will need to be patible with all browsers (excluding IE6).

And here is a fiddle.

Here is my code:

<a href="">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

<textarea rows="5" cols="40" name="replycontent" id="replycontent">Hello World</textarea>

I want to insert text at the end of the textarea by the click of a link. So if you click on the Test 1 link, it will insert Thank you and so on. The solution will need to be patible with all browsers (excluding IE6).

And here is a fiddle.

• javascript
• jquery
• text
• insert
• textarea

• not sure about what you really want, anyway there is a working example : jsfiddle/Gcaqe/3 – RafH Commented Apr 21, 2013 at 16:30
• @RafH That is exactly what I want, however, I noticed that it get replaced if I click both links. Is it possible that I can click both links and then both texts are added (rather than once being replaced)? – Gary Woods Commented Apr 21, 2013 at 16:32
• jsfiddle/Gcaqe/10 – RafH Commented Apr 21, 2013 at 16:35

3 Answers 3

set attrubute data-text fot link and try:

<a href="" data-text="Thank you">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="" data-text="Good luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

<textarea rows="5" cols="40" name="replycontent" id="replycontent">Hello World</textarea>

javascript:

$("a[data-text]").click(function(){
  $("#replycontent").val($(this).attr("data-text"));
  return false;
})

http://jsfiddle/ZqJVN/

upd:

For add(not replace text) in textarea:

$("a[data-text]").click(function(){
   var value = $("#replycontent").val();
   $("#replycontent").val(value+$(this).attr("data-text"));
   return false;
 })

http://jsfiddle/Vxeye/

upd by ment: Paste text in new line: http://jsfiddle/hkEmn/

use data attribute of HTML5 and click() event.. i added a class to <a> tag to be specific in selector.

HTML

<a href="#" class="aClass" data-text="Thank You">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="#" class="aClass" data-text="Good Luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>   

JQUERY updated as ment

jQuery('.aClass').click(function(e){
  e.preventDefault(); //to prevent the default behaviour of a tag 
  var val = jQuery('#replycontent').val(); //get prvious value
  jQuery('#replycontent').val(val + "\r\n" + jQuery(this).data('text')); //replace it.. ' ' so that there isspace beween the added text
});

updated

<a href="#" class="aClass">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="#" class="aClass" >Test 2</a> Clicking this will add "Good luck" to textarea<br/> 

jquery

jQuery('.aClass').click(function(e){
   e.preventDefault(); //to prevent the default behaviour of a tag 
   var val = jQuery('#replycontent').val(); //get prvious value
   if(jQuery(this).text() == 'Test 1'){
       jQuery('#replycontent').val(val + 'Thank You ');
   }else{
       jQuery('#replycontent').val(val + 'Good Luck ');
   }
});

fiddle here

fiddle in new line

fiddle with both example

You can add a span tag to your specific word that you want to append:

<a href="">Test 1</a> Clicking this will add "<span>Thank you</span>" to textarea<br/>
<a href="">Test 2</a> Clicking this will add "<span>Good luck</span>" to textarea<br/>

Then you can use append():

$("a").on('click',function(e) {
    e.preventDefault();
   $("#replycontent").append($(this).next('span').text() + ' ');
})

FIDDLE

or better you can use HTML5 data attribute for your anchor:

<a href="" data-text="Thank you">Test 1</a> Clicking this will add "Thank you" to textarea<br/>
<a href="" data-text="Good luck">Test 2</a> Clicking this will add "Good luck" to textarea<br/>

then you can do:

$('a').click(function(e){
     e.preventDefault(); 
     var val = $('#replycontent').val();
     $('#replycontent').val(val + $(this).data('text') + ' ');
});

FIDDLE

EDIT

If you want to add new line whenever appending new value to your textarea, you just need to use \n along with your appended value:

$('#replycontent').val(val + '\n' + $(this).data('text'));

Updated Fiddle