Populating a textarea with an input string

**Michelle Klann** · 02-28-2010, 07:12 PM

I need help with something seemingly simple. I am trying to populate a textarea by passing data from 3 or more input text boxes. I have found similar solutions on the web but I am not really a JS programmer and I can't figure out how to get it working exactly as I need it to.

Here is an example of what I am trying to do as well as a few working examples that I found:

http://www.liquamedia.com/js/dynamic_textarea.html

Any assistance would be GREATLY appreciated!!!

In case you want my example source, here it is:

Code:

<html>
<head>
<script language="Javascript" type="text/javascript">

function populateTextArea(){

  var output = new Array();
  var fieldID = 1;

  while (fieldObj = document.form_pe['pe_gen'+fieldID]) {

    if (fieldObj.length) {
      for (var j=0; j<fieldObj.length; j++) {
        if (fieldObj[j].checked) {
          output[output.length] = fieldObj[j].value;
        }
      }
    } else {
      if (fieldObj.checked) {
        output[output.length] = fieldObj.value;
      }
    }

    fieldID++;
  }

  document.getElementById('targetarea').value = output.join(', ');

}


function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}

function toCount(entrance,exit,text,characters) {
  var entranceObj=getObject(entrance);
  var exitObj=getObject(exit);
  var length=characters - entranceObj.value.length;
  if(length <= 0) {
    length=0;
    text='<span class="disable"> '+text+' </span>';
    entranceObj.value=entranceObj.value.substr(0,characters);
  }
  exitObj.innerHTML = text.replace("{CHAR}",length);
}

	
</script>

<style type="text/css">

.minitext {
  font: normal 0.7em Arial, sans-serif;
  color: Black;
}

.disable {
  background-color: #CF110C;
  color: #fff;
  font-weight: bold;
  padding: 5px;
}

</style>

</head>

<body>




<b>What I need:</b><br><br>
<form method="POST" action="">

String 1: <input type="text" value=""><br>
String 2: <input type="text" value=""><br>
String 3: <input type="text" value=""><br>  
  

<br>
<a href="#" onClick="populateTextArea();">Populate</a><br>
<br>

<textarea cols="50" rows="5" readonly>This is my readonly content with "String 1" inserted here, "String 2" inserted here, and "String 3" inserted here.</textarea>
<br>

<span>22 characters left</span>


</form>

<br>
<br>


<br><b>Working Example </b>
<br>
But using checkbox and radio buttons and there is no preset readonly copy inside the textarea:<br><br>
<form name="form_pe" method="" action="">

  <input type="checkbox" name="pe_gen1" id="pe_item2" value="Text string 1"> Text string 1<br>
  
  
  <input type="radio" name="pe_gen2" id="pe_item4" value="Text string 2">Text string 2
  <input type="radio" name="pe_gen2" id="pe_item6" value="Text string 3">Text string 3<br>                 
  <input type="radio" name="pe_gen3" id="pe_item8" value="Text string 4">Text string 4
  <input type="radio" name="pe_gen3" id="pe_item10"  value="Text string 5">Text string 5<br>
  <input type="radio" name="pe_gen4" id="pe_item12" value="Text string 6">Text string 6
  <input type="radio" name="pe_gen4" id="pe_item14" value="Text string 7">Text string 7<br>


<br>
<a href="#" onClick="populateTextArea();">Populate</a><br>
<br>

<textarea id="targetarea" cols="50" rows="5"></textarea>
</form>


<br>
<br><b>Working character count </b>
<br>
My final textarea can only have 140 characters, again here is a working script that is close but not quite what I need...
<br>
<br>


<form action="#" method="post">

      <input type="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="toCount('eBann','sBann','{CHAR} characters left',140);">
      <br>
      <span id="sBann">140 characters left.</span>

</form>

</body>
</html>

**vwphillips** · 03-01-2010, 01:34 PM

Code:

<html>
<head>
<script language="Javascript" type="text/javascript">

function populateTextArea(){

  var output = new Array();
  var fieldID = 1;

  while (fieldObj = document.MyForm['ip'+fieldID]) {

    if (fieldObj.length) {
      for (var j=0; j<fieldObj.length; j++) {
          output[output.length] = fieldObj[j].value;
      }
    } else {
        output[output.length] = fieldObj.value;
    }

    fieldID++;
  }

  document.getElementById('targetarea').value = output.join('\n');

}


</script>

<style type="text/css">

.minitext {
  font: normal 0.7em Arial, sans-serif;
  color: Black;
}

.disable {
  background-color: #CF110C;
  color: #fff;
  font-weight: bold;
  padding: 5px;
}

</style>

</head>

<body>




<b>What I need:</b><br><br>
<form name="MyForm" method="POST" action="">

String 1: <input type="text" name="ip1" value=""><br>
String 2: <input type="text" name="ip2" value=""><br>
String 3: <input type="text" name="ip3" value=""><br>


<br>
<a href="#" onClick="populateTextArea();">Populate</a><br>
<br>

<textarea id="targetarea" cols="50" rows="5" readonly>This is my readonly content with "String 1" inserted here, "String 2" inserted here, and "String 3" inserted here.</textarea>
<br>

<span>22 characters left</span>


</form>


</body>
</html>

Thread: Populating a textarea with an input string

Thread Tools

Search Thread

Populating a textarea with an input string

Bookmarks

Bookmarks

Posting Permissions