• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 164
  • Last Modified:

Copy prevous tag contents

I have some pages which have multiple textareas.  I would like to copy the contents to the following div so that they can be fully printed.
eg.
 <textarea>Initial comments here<textarea><div><div>
 <textarea><textarea><div><div>
 <textarea>Some more comments<textarea><div><div>

The function will be executed on pageload and the finished result should look like
 <textarea>Initial comments here</textarea><div>Initial comments here</div>
 <textarea></textarea><div></div>
 <textarea>Some more comments</textarea><div>Some more comments</div>

Any one know how I can do this.  The <div> always immediately follows the <textarea> if that helps.
0
k2consulting
Asked:
k2consulting
  • 3
  • 2
  • 2
  • +2
1 Solution
 
devicCommented:
<script>
try this:
=================================
window.onload = function()
{
      var ta = document.getElementsByTagName("textarea");
      for(var i=0; i<ta.length; i++)
      {
            if(ta[i].nextSibling.nodeName == "DIV")
            {
                  ta[i].nextSibling.innerHTML = ta[i].value;      
            }
      }
}
</script>
<textarea>Initial comments here</textarea><div></div>
<textarea></textarea><div></div>
<textarea>Some more comments</textarea><div></div>
0
 
thirdCommented:
try,

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Author: Third Santor</title>
<script>
  function copyToDIV(){
    var strArr = document.getElementsByTagName("TEXTAREA");
    var divArr = document.getElementsByTagName("DIV");
    for(var i=0; i<strArr.length; i++){
      divArr[i].innerHTML = strArr[i].value;
    }
  }
</script>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<form name="form1" method=post action="" onsubmit="">
<textarea>Initial comments here</textarea><div></div>
 <textarea></textarea><div></div>
 <textarea>Some more comments</textarea><div></div>
 <input type="button" value="Copy to DIV" onclick="copyToDIV();">
</form>
</body>
</html>

0
 
thirdCommented:
devic's solution is nice.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
k2consultingAuthor Commented:
Devic,
I think your solution will work for me, however can you help me modify it to fitt within this function which looks for textareas within a question div and adds the div tags after.

var div = document.getElementsByTagName('div');
for(var x in div){
   if(div[x].className=='question'){
       var inner = div[x].innerHTML;
       var newInner = inner.replace(/<TEXTAREA/gi,'<TEXTAREA onchange="copy(this)" ');
       var newInner = newInner.replace(/TEXTAREA>/gi,'TEXTAREA><div></div> ');
       div[x].innerHTML = newInner;
       }    
   }



0
 
devicCommented:
maybe this:
====================================
<script>
window.onload = function()
{
      var div = document.getElementsByTagName('div');
      for(var x in div)
      {
            if(div[x].className == 'question')
            {
                  var inner = div[x].innerHTML;
                  inner = inner.replace(/<TEXTAREA/gi,'<TEXTAREA onchange="copy(this)" ');
                  inner = inner.replace(/>([^<]*)<\/TEXTAREA>/gi,'>$1</TEXTAREA><div>&nbsp;$1</div> ');
                  div[x].innerHTML = inner;
            }    
      }
}
function copy(obj){}
</script>
<div class=question>
      <textarea>Initial comments here</textarea>
      <textarea></textarea>
      <textarea>Some more comments</textarea>
</div>
0
 
ZvonkoSystems architectCommented:
'Mojn!

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function copyTA(){
  theArea=this;
  var theDiv = document.getElementById("_div_"+theArea.name);
  theDiv.innerHTML=theArea.value;
}
window.onload = function(){
  var theBody = document.body;
  var elem = document.forms[0].elements;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="textarea"){
      var taElem=elem[i];
      var newDiv = document.createElement("div");
      newDiv.innerHTML = taElem.value;
      newDiv.id = "_div_"+taElem.name;
      taElem.parentNode.insertBefore(newDiv,taElem);
      taElem.onchange=copyTA;
    }
  }
}
</script>
</head>
<body>
<form>
    <textarea name="TA1">Initial comments here</textarea>
     <textarea name="TA2">Here too.</textarea>
     <textarea name="TA3">Some more comments</textarea>
<div style="background-color:silver;text-align: center;">
See the resulting dynamic html with PageSpy:<br>
http://www.experts-exchange.com/M_1344026.html
</div>
</form>
</body>
</html>

;-)

0
 
k2consultingAuthor Commented:
Both ways cause a runtime error when entering text when run on the following

<div class="form"><DIV class="question"><P><STRONG>7.</STRONG> Which three of the above would you see as your strongest leadership abilities? Why?</P><P />1.
<TEXTAREA name="strongest1" rows="3" cols="80">x</TEXTAREA><P />2.
<TEXTAREA name="strongest2" rows="3" cols="80"></TEXTAREA><P />3.
<TEXTAREA name="strongest3" rows="3" cols="80"></TEXTAREA><P /></DIV></div>
0
 
Pravin AsarCommented:
Here is a simple example which does a synchornize the associated div with textarea string.

<html>
<head>
<script language="javascript">
function updatediv (fld) {
    var divObj = document.getElementById ('div_'+fld.id);
    if (!divObj) { return;}
    div.innerHTML = fld.value;
}

//
// To update at the load time
//
function updateAll () {
updatediv(document.myform.textarea1);
updatediv(document.myform.textarea2);
}
</script>
<head>
<body onload="updateAll()">
<form name="myform">
<textarea id="textarea1" onkeyup="updatediv(this);"></textarea>
<div id="div_textarea1"></div>
<textarea id="textarea2" onkeyup="updatediv(this);"></textarea>
<div id="div_textarea2"></div>
</form>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
Do you have a <form> tag on your page?
0
 
devicCommented:
moin Zvonko ;) , cool, I wanted  with dinamic nodes too and then decided to do with original code.

hi k2consulting,
try replace <P /> with <BR>  ;)

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now