Forum Moderators: open
is this possible?
a list of radio buttons with a textarea that is pre filled with text. if another radiobutton is chosen the prefilled text changes.
Kind Regards
/Hafnius
<script>texts =
[
"Charles Christopher Parker, Jr. was born on August 29, 1920 in\
Kansas City, Kansas to Charles and Addie Parker. He was given\
the nicknames \"Bird\" and \"Yardbird\". Since a chicken is a \"yard bird\"\
and Parker was quite fond of chicken, Parker was given the nickname Charlie\
\"Yardbird\" Parker. He was also nicknamed \"Bird\" for his tendency to \"\
live free as a bird\". ",
"At age seven, Parker came to Kansas City and began studying music,\
but school wasn't his only thing. He played the baritones in high school.\
In the ninth grade, Parker joined the marching band at Lincoln High.\
This was under the leadership of Alonzo Lewis.",
"In December, while experimenting with different chord changes on\
\"Cherokee\" during a jam session at a chicken shack in Harlem,\
Parker discovered a fresh approach to improvisation.\
These changes in the flatted fifth and harmonic substitutions\
in the chord progressions, advancements that coupled with\
the emerging sounds of Harlem would later provide the foundation\
for bebop."
]
function radio_selected(i)
{
document.getElementById('text').innerHTML = texts[i]
}
onload = function()
{
document.forms[0].elements[0].checked = true
document.getElementById('text').innerHTML = texts[0]
}
</script>
<form id="theform">
<textarea id="text" rows="10" cols="50"></textarea><br />
<input type="radio" onclick="radio_selected(0)" name="group1" />
<input type="radio" onclick="radio_selected(1)" name="group1" />
<input type="radio" onclick="radio_selected(2)" name="group1" />
</form>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function radCheck(){
var l=document.firstForm.radOne.length;
for(var i=0;i<l;i++){
if(document.firstForm.radOne[i].checked)document.firstForm.txtOne.value=document.firstForm.radOne[i].value;
}
}
//-->
</script>
</head>
<body onload="radCheck();">
<form name="firstForm" onclick="radCheck();">
<input type="radio" name="radOne" checked="checked" value="Now is the time . . ." />One
<input type="radio" name="radOne" value=". . . for all good men . . ." />Two
<input type="radio" name="radOne" value=". . . to come to the aid . . ." />Three
<textarea name="txtOne">
</textarea>
</form>
</body>
</html>
[edited by: Rambo_Tribble at 10:33 pm (utc) on April 18, 2004]
If i understand this ex. the <script> section goes in the <head> and the rest in the <body> section. like this it does not work and i cant seem to make it work.
doesn't the texts need to be numbered 0,1,2 for this to work?
Kind Regards
/Hafnius
thanks for the ex. I like the simplicity and it works beautifully - and its comparatively easy to modify.
Kind Regards
/Hafnius
doesn't the texts need to be numbered 0,1,2 for this to work?
No. The form I used is a shorthand for arrays. eg:
arr = [3,4,5]
is the same as
arr = new Array()
arr[0] = 3
arr[1] = 4
arr[2] = 5
This form can be multi-line, but two things to watch out for here:
1. Make sure you don't forget the comma, but don't put one at the bottom
2. So I didn't need to enclose every line in " ", I used an escape '\' at the end of each line.
If i understand this ex. the <script> section goes in the <head> and the rest in the <body> section.
Yes, generally, but it should work if you put the whole lot in the BODY too.
If it doesn't work, it's probably a cut'n'paste error.
You may feel more comfortable putting all the text in non-displaying DIVs...
<div id="textholder" style="display:none;">
<div>blah blah</div>
<div>blah blah</div>
<div>blah blah</div>
</div>
radio_selected(i)
{
var text = document.getElementById('textholder').getElementsByTagName('div')[i].innerHTML
document.getElementById('text').innerHTML = text
}
You might like this, I worked up a variation that switches divs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Radio/div selector 04.18.04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#one,#two,#three{visibility:hidden;position:absolute;height:200px;width:300px;}
#one{background:#FEE;}
#two{background:#EFE;}
#three{background:#EEF;}
</style>
<script type="text/javascript">
function radFlip(){
var l=document.firstForm.radOne.length;
for(var i=0;i<l;i++){
var to_see=document.firstForm.radOne[i].value;
if(document.firstForm.radOne[i].checked){
document.getElementById(to_see).style.visibility="visible";
}else{
document.getElementById(to_see).style.visibility="hidden";
}
}
}
</script>
</head>
<body onload="radFlip();">
<form action="" name="firstForm" onclick="radFlip();">
<p>
<input type="radio" name="radOne" value="one" />One
<input type="radio" name="radOne" checked="checked" value="two" />Two
<input type="radio" name="radOne" value="three" />Three
</p>
</form>
<div>
<div id="one">
Volumes may be written, with <i>embellishments</i>. <strong>Text may be stressed.</strong>
</div>
<div id="two">
<span style="font:1em bold Verdana,sans-serif;">Variations may be achieved through
a range of HTML and CSS attributes. </span>
</div>
<div id="three">
<form action="">
<p>
<button type="button">Just a button</button>
</p>
</form>
</div>
</div>
</body>
</html>
