Populating a textarea with an input string [Archive]

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!!! :cool:

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

<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

<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>