CODEWITHSUNDEEP
phpjavascripthtmlcopytextarea
John
John

Reputation: 21

content from divs into textarea

I'd like to transfer text from all div's with specific class to the textarea on the same page.

How can I do that?

for example:

< div class="test1" > Example1 < /div >
< div class="test2" > Example2 < /div >
< div class="test1" > Example3 < /div >
< div class="test3" > Example4 < /div >

I would like to transfer the content of div class test1 and in the textarea should show "Example1" and "Example3".

Any help, please! javascript or php

john

Upvotes: 2

Views: 3755

Answers (5)

Sri Krishna
Sri Krishna

Reputation: 11

function copydivtext(){
   var x = document.getElementsByClassName('test1');

   var textarea = document.createElement("textarea");
   textarea.innerHTML = x[0].innerHTML + x[1].innerHTML;
   document.body.appendChild(textarea);
}
copydivtext();

Upvotes: 0

Waqas Ahmed
Waqas Ahmed

Reputation: 31

you can simply do that by using jquery

$(document).ready(function(){
  $("#text").keyup(function(){
    var text = $("#text").val();
    $(".test").html(text);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<textarea id="text"></textarea>

Upvotes: 1

sohum
sohum

Reputation: 3247

I'd suggest using the "id" attribute for the divs instead of class. Basically, you would need to write a JavaScript function that uses GetElementById() or GetElementByObject().

Then define a button that calls that function passing it the id of the div and the id of the textarea. Finally, set the textarea object's value to the div object's value.

EDIT: Here's the function.

<script type="text/javascript">
function copyValues(idFrom, idTo) {
    var objFrom = document.getElementById(idFrom);
    var objTo = document.getElementById(idTo);

    objTo.value = objFrom.value
}
</script>

On the event you want it triggered:

copyValues("div1", "textarea1");
copyValues("div2", "textarea2");
copyValues("div3", "textarea3");

Upvotes: 0

brendan
brendan

Reputation: 30006

If you're looking for pure javascript this would work - though things like this are very easily handled in frameworks like jQuery:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript">

        function CopyDivsToTextArea()
        {
            var divs = document.getElementsByTagName("div");
            var textToTransfer = "";
            var pattern = new RegExp("test1");

           for(var i=0;i<divs.length;i++)
            {
            if(pattern.test(divs[i].className))
                {
                   textToTransfer += (divs[i].innerText || divs[i].textContent);
                }
             }
         document.getElementById("ta").value = textToTransfer;
        }

    </script>
</head>
<body>
<div class="test1" > Example1 </div >
<div class="test2" > Example2 </div >
<div class="test1" > Example3 </div >
<div class="test3" > Example4 </div >
<br />
<textarea id="ta" cols="50" rows="20"></textarea>
<br />
<input type="button" id="btn" value="Button" onclick="CopyDivsToTextArea();" />
</body>
</html>

Upvotes: 3

Kevin Peno
Kevin Peno

Reputation: 9206

This would be done pretty easily with jQuery:

var newTextVal = "";
$('.text1').each(
    function()
    {
       newTextVal += $(this).text();
    }
);
 $('textarea').val( newTextVal );

This above will loop through each element with class "text1" and append it's text node value to the text within the textarea.

Upvotes: 9

Related Questions