Multiple <textarea> type="radio" Population Problem

soma56

12-29-2010, 09:33 PM

This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Textarea Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel');
text[1] = Array('Couch', 'Bed', 'Chair');
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="frm">

<input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

<input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">

<textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

</body>
</html>

However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Multiple Textareas Based on Radio Button Selection</title>

<script>
text = new Array()
text[0] = Array('Hotel', 'Motel');
text[1] = Array('Couch', 'Bed', 'Chair');
function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

<script>
textt = new Array()

text[0] = Array('Ham', 'Turkey', 'Chicken');


text[1] = Array('Beer', 'Soda', 'Water');


text[2] = Array('Milk', 'Cheese', 'Butter');

function populate(r,f){
t=-1;
for(var i=0;i<f.elements[r].length;i++){
if (f.elements[r][i].checked){
var t=i;
}
}
if(t>-1){
f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n");
}
}
</script>

</head>
<body>
<form name="form">

<input type="radio" name="test" value="0" onClick="populate(this.name,this.form)">

<input type="radio" name="test" value="1" onClick="populate(this.name,this.form)">

<textarea name="thefirsttextarea"></textarea>
<input type="submit" value="submit" />
</form>

<form name="anotherform">

<input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)">

<input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)">

<textarea name="SECONDFORM"></textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>

With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2.

Old Pedant

12-29-2010, 10:32 PM

You just need to pass along a reference to the textarea, too.

<input type="radio" name="anothertest" value="1"
onClick="populate(this.name,this.form,this.form.SECONDFORM)">

But you know, you have made this whole thing *WAY* too complex!

WAY WAY.

Old Pedant

12-29-2010, 10:45 PM

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Populate Multiple Textareas Based on Radio Button Selection</title>

<script>
var features = [
['Hotel', 'Motel'],
['Couch', 'Bed', 'Chair']
];

var foods = [
['Ham', 'Turkey', 'Chicken'],
['Beer', 'Soda', 'Water'],
['Milk', 'Cheese', 'Butter']
];

function populate(rb, aname, ta)
{
rb.form[ta].value = aname[rb.value].join("\n");
}
</script>
</head>
<body>
<form name="form">
<input type="radio" name="test" value="0" onClick="populate(this,features,'thefirsttextarea')">
<input type="radio" name="test" value="1" onClick="populate(this,features,'thefirsttextarea')">
<br>
<textarea name="thefirsttextarea"></textarea>
<br>
<input type="radio" name="test2" value="0" onClick="populate(this,foods,'thesecondtextarea')">
<input type="radio" name="test2" value="1" onClick="populate(this,foods,'thesecondtextarea')">
<input type="radio" name="test2" value="2" onClick="populate(this,foods,'thesecondtextarea')">
<br>
<textarea name="thesecondtextarea"></textarea>
<br>
<input type="submit" value="submit" />
</form>
</body>
</html>

Having two <form>s on a page is almost always a problem, so I got rid or your second one. If you had it there for some reason *other* than getting your JS code to work, you can put it back in.

Old Pedant

12-29-2010, 10:47 PM

I would also point out that you don't really *need* the JS function.

You could easily do this all inline in the onclick.

Example:

<input type="radio" name="test" value="0"
onClick="this.form.thefirsttextarea.value=features[0].join('\n');">