CODEWITHSUNDEEP
jquery
roi
roi

Reputation: 59

jquery - how to copy content to textarea

I have form with textarea that allows users to add replies

I would like to add button to each reply (class "quoteMsg"). clicking on it will copy the reply content (have class="replyMsg" ) + the writer name+date (inside SPAN tag) to the textarea (name="msgText") + add "$" note before and after the content

Here is the HTML example:

<form method="post" action='index.php' id="submitReply">
    <p><textarea name="msgText"></textarea> <span></span></p>
</form>

<section class="replyBox">
        <article class="left">
            <header>
                <h2>Re: Voucher Release Prblm - Comm</h2>
                <span>By esther  <strong>&raquo;</strong>  21-10-2014 12:06</span>
                <a href="#" class='quoteMsg'>Quote</a>
            </header>   

            <div class="replyMsg">
                If will happen again, I will open a new track<br />
            </div>
        </article>
</section>

<section class="replyBox">
    <article class="left">
        <header>
            <h2>Re: Voucher Release Prblm - Comm</h2>
            <span>By esther  <strong>&raquo;</strong>  23-07-2014 11:19</span>
            <a href="#" class='quoteMsg'>Quote</a>
        </header>   

        <div class="replyMsg">
            OK, thanks
        </div>
</section>

should i do something like this:

<script>    
$('.quoteMsg').click(function() 
{
    var msgContent = parents("article").find(".replyMsg").val(); 
    //alert(msgContent);

})
</script>

? if yes - how do i put in inside the textarea field?

Upvotes: 1

Views: 239

Answers (2)

Jaber
Jaber

Reputation: 275

Simple way

$('.quoteMsg').click(function() 
{
    var msgContent = $(this).closest("article").find(".replyMsg").text(); 
    console.log(msgContent);
});

Upvotes: 0

Saumya Rastogi
Saumya Rastogi

Reputation: 13709

You can use jQuery's closest() attribute to find the element like this:

$(document).on('ready', function() {
	$('.quoteMsg').click(function()  {
		var txt = $(this).closest('.replyBox').find('.replyMsg').text();
		$("textarea[name='msgText']").val($.trim(txt));
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action='index.php' id="submitReply">
    <p><textarea class="msgText" name="msgText"></textarea> <span></span></p>
</form>

<section class="replyBox">
        <article class="left">
            <header>
                <h2>Re: Voucher Release Prblm - Comm</h2>
                <span>By esther  <strong>&raquo;</strong>  21-10-2014 12:06</span>
                <a href="#" class='quoteMsg'>Quote</a>
            </header>   

            <div class="replyMsg">
                If will happen again, I will open a new track<br />
            </div>
        </article>
</section>

<section class="replyBox">
    <article class="left">
        <header>
            <h2>Re: Voucher Release Prblm - Comm</h2>
            <span>By esther  <strong>&raquo;</strong>  23-07-2014 11:19</span>
            <a href="#" class='quoteMsg'>Quote</a>
        </header>   

        <div class="replyMsg">
            OK, thanks
        </div>
    </article>
</section>

Hope this helps!

Upvotes: 2

Related Questions