Generating code from a Texbox to Textarea

**trowa_barton** · 11-01-2008, 12:00 PM

Hi, I am a newbie in Javascipt and not really good in it.

I was trying to create a textbox and a checkbox and the data will be able to display in a textarea upon I checked it. I am able to do in a ASP but I want a much more simpler html which doesnt need to pass through a server or something. Appreciate if anyone can help me?

**jscheuer1** · 11-01-2008, 02:45 PM

Not everyone has javascript enabled, so it would be a good idea to keep it in asp. However, this can be done in javascript. What do you want to have happen? It could be that when you check the checkbox, the value in the textbox replaces the value in the textarea. Or the value in the textbox could be added to the value in the textarea. You may or may not want to add a line break or some other delimiter if adding to the textarea. You may or may not want to check the value of the textarea to see if already contains the value from the textbox. You may or may not want to include the name (or some other identifying information for the textbox) with its value when that value is transferred to the textarea. You may or may not want to remove the value from the textarea if the checkbox is unchecked. You may or may not want to remember what that value was, in case the value of the textbox changes before the checkbox is unchecked.

There might be something else I'm not considering. In simplest terms:

Code:

<form action="#">
<input type="text" name="bob"> 
<input type="checkbox" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['bob'].value;"><br>
<textarea name="bobt" cols="50" rows="5"></textarea>
</form>

**trowa_barton** · 11-01-2008, 04:25 PM

Hi, John

That was pretty much in the way I wanted. Thanks so much. I could not work out with server-side scripts. So I was hoping JS can help me in some way. My main idea is a create a few texboxes (Txtbox1 and Txtbox 2) and data input will added up actually and displayed in the textarea. Something like textarea.value= "<html>"+textarea.value+"</html>"

**scorptique** · 11-20-2008, 05:30 PM

That code was helpful. But what if I want multiple checkboxes and everytime I check a box, the contents will go into the textarea and are separated by commas.

I tried adding multiple messages in my textbox with this code, but it didnt work. It said, "undefined". Can you help me?

Code:

<form action="#">
<input type="checkbox" name="list[]" value="Testing" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list[]'].value;">Testing<br>
<input type="checkbox" name="list[]" value="Testing2" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list[]'].value;">Testing2<br>
<input type="checkbox" name="list[]" value="Testing3" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list[]'].value;">Testing3<br>
<textarea name="bobt" cols="50" rows="5"></textarea>
</form>

**magicyte** · 11-20-2008, 06:19 PM

Try this:

Code:

<form action="#">
<input type="checkbox" name="list1" value="Testing" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list1'].value;">Testing<br>
<input type="checkbox" name="list2" value="Testing2" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list2'].value;">Testing2<br>
<input type="checkbox" name="list3" value="Testing3" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list3'].value;">Testing3<br>
<textarea name="bobt" cols="50" rows="5"></textarea>
</form>

The checkboxes in your form all had the same name, therefore when you tried to fetch values, it just couldn't decide which.

-magicyte

**scorptique** · 11-21-2008, 06:03 AM

Code:

<form action="#">
<input type="checkbox" name="list1" value="Testing" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list1'].value;">Testing<br>
<input type="checkbox" name="list2" value="Testing2" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list2'].value;">Testing2<br>
<input type="checkbox" name="list3" value="Testing3" 
onclick="if(this.checked) this.form.elements['bobt'].value = this.form.elements['list3'].value;">Testing3<br>
<textarea name="bobt" cols="50" rows="5"></textarea>
</form>

I tried this, the one you shared, but it isn't working right =/ It replaces the previous value when I check another box. I was looking for a continous string like "testing, testing2, testing3" and separated by commas. Sorry, I'm seriously new to javascript ><

**jscheuer1** · 11-21-2008, 09:39 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var addVal = function(s, d){
 var f = s.form.elements, n = s.name, a = [];
 for(var i = 0; i < f[n].length; ++i)
  if(f[n][i].checked)
   a[a.length] = f[n][i].value;
f[d].value = a.join(', ');
};
</script>
</head>
<body>
<form action="#">
<input type="checkbox" name="list[]" value="Testing" 
onclick="addVal(this, 'bobt')">Testing<br>
<input type="checkbox" name="list[]" value="Testing2" 
onclick="addVal(this, 'bobt')">Testing2<br>
<input type="checkbox" name="list[]" value="Testing3" 
onclick="addVal(this, 'bobt')">Testing3<br>
<textarea name="bobt" cols="50" rows="5"></textarea>
</form>
</body>
</html>

Thread: Generating code from a Texbox to Textarea

Thread Tools

Search Thread

Generating code from a Texbox to Textarea

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions