Insert text from a tag into textarea with jQuery

Question

I have been reading through a few pages in order to figure out how to insert the content from a html tag into a textarea element.

I have found a page with an example here on stackoverflow which I tried to modify, however since I'm not experienced in using jquery I (of course) quickly ran into trouble ! because I simply don't know how to "connect" a click-event on a html tag with an event which inserts the content from a html tag for example:

<p>something</p>

into a textarea element.

Here is what I have so far:

$("p").click(function() {
 $(this).
  $("textarea").insertAtCaret('text');

and the main issue is what write after:

$(this).????

I have made a jsfiddle where my project is shown

I hope that someone would be so kind as to help me out or at least point me in the right direction - thank you in advance :o)

You want to get a string from a tag like
and add it to your textarea? — Arya Aghaei, Dec 17 '17 at 08:14

score 0 · Answer 1 · answered Dec 17 '17 at 02:14

0

to get a tag content use text() and to get an input/textarea content use val() also to edit their content use text('some content ') / val('some content ')

$("p").click(function() {
var content=$(this).text();
$("textarea").val(content);

answered Dec 17 '17 at 02:14

Aref Ben Lazrek

1,056
1
11
19

This seems to delete/replace any other content which is already in the textarea which is not what i wanted. – NeoFox1972 Dec 17 '17 at 07:03
Then simply do `$("textarea").val( $(textarea).val() + " " + content );` – Deepak Kamat Dec 17 '17 at 08:57
@NeoFox1972 if you want to keep old content place it in a var the readd it with other content – Aref Ben Lazrek Dec 17 '17 at 14:17
What's not clear? It isn't small? Then store the existing value in a variable `var content_full = $(textarea).val() + content; $("textarea").val( content_full ); ` – Deepak Kamat Dec 17 '17 at 14:36

score 0 · Answer 2 · answered Dec 17 '17 at 08:54

I made a jsfiddle for you which get first name and last name from 2 div (you can change them to p, no matter), and when you click on the button, the textarea's text will replace with new names. hope it works, please confirm if it solves your problem.

Html:

    <h2>
we have 2 paragraph and we want to add them ro our textare.
</h2>

<div class="FName">Arya</div>
<div class="LName">Ag</div>
<form action="#">
  <textarea name="message" rows="10" cols="30">
Insert [firstname] or [lastname] at the position of the cursor in this textarea while keeping the content already there 
</textarea>
<br/>
<br/>
<input type="button" value="update" id="updater"/>

Js:

$('#updater').on('click',function(){
var FName= $('.FName').text();
var LName= $('.LName').text();

$('textarea').text($('textarea').val().replace("[firstname]",FName).replace('[lastname]',LName));

})

No, this don't solve my problem as I'm not interested in replacing a piece of text with another - all I want is to insert a piece of text for example [firstname] at the cursor's position - thank you for your effort :o) — NeoFox1972, Dec 17 '17 at 15:30

Insert text from a tag into textarea with jQuery

2 Answers2