PDA

View Full Version : 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:


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


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


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