ansaurus

Question

Answer 1

+4 A:

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.

Kevin Peno 2009-11-02 23:39:37

That looks like it could be improved. I would suggest storing the value in a string or array of strings and setting the textarea value only at the end rather than reassigning it each time round the loop.

Tim Down 2009-11-03 00:22:45

Absolutely agree. I've updated to suit :)

Kevin Peno 2009-11-03 00:36:46

Answer 2

A:

I'd suggest using the "id" attribute for the divs instead of class. Anyhow, I'll knock something up if I get home and you haven't figured it out. 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");

sohum 2009-11-02 23:42:51

That would mean a new call to copyValues for every div on the page you wanted to do this with. That could get out of hand fast.

Kevin Peno 2009-11-02 23:53:23

Answer 3

+2 A:

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>

brendan 2009-11-02 23:49:10

I like the lack of reliance on a library, but there's a brittleness with the `if(divs[i].className == "test1")` line: elements can have multiple CSS classes, so you should test for that with a regular expression or equivalent instead of the simple equality comparison. Also, innerHTML is probably the wrong choice, since you could end up with unwanted HTML mark-up in the textarea. You could use `innerText` / `textContent` instead: `textToTransfer += (divs[i].innerText || divs[i].textContent);`. `innerText` and `textContent` are not quite equivalent but it may be good enough.

Tim Down 2009-11-03 00:20:00

good points Tim, updated the example - just something I threw together, not 100% vetted for all scenarios. Thanks!

brendan 2009-11-03 00:42:45

+1 for elegancy and no library requirement :)

Kevin Peno 2009-11-03 05:38:43

Answer 4

A:

Thank You for Your Answers! Great!

John 2009-11-03 11:45:15

Choose to accept the one that works best for you then ;) (click the checkbox next to the answer)

Kevin Peno 2009-11-05 17:44:24

ansaurus

tags:

views:

answers:

content from divs into textarea

related questions