Text Manipulation with radio buttons [Archive]

elso

06-27-2009, 04:22 PM

Hello

I don't understand why I am having this trouble. I have tried many variations, but to no avail.
The objective here is to change some displayed text based on radio button selection. My function script currently reads:

<script language="JavaScript" type="text/javascript">
function a10892F() {
var MugSelect = document.getElementById('MugSelect').value;
var choice1 = "glass";
var choice2 = "deco";

if (MugSelect == choice1)
{
document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
}
else if (MugSelect == choice2)
{
document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
}
else
{
document.getElementById('a10892').innerHTML = 'Default text for any other choice';
}

}
</script>
The radio buttons:

<input name="MugSelect" type="radio" value="deco" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="18oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="glass" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="15oz" id="MugSelect" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="22oz" id="MugSelect" onclick='a10892F()' />
Changing text section:

<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>
I get no errors, and the script is being read, but it seems the conditions are being ignored. If I select "deco" in the radio buttons, my expectation is the script would halt as soon as the "else if (MugSelect == choice2)" is seen as true. But it doesn't, it executes through to the final "else" regardless, and displays that message.

Can some one please show me what I am doing wrong here?

Many thanks
Elso

vwphillips

06-28-2009, 08:36 AM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function a10892F(rad) {
var val=rad.value
var choice1 = "glass";
var choice2 = "deco";

if (val == choice1)
{
document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
}
else if (val == choice2)
{
document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
}
else
{
document.getElementById('a10892').innerHTML = 'Default text for any other choice';
}

}
</script></head>

<body>
<form>
<input name="MugSelect" type="radio" value="deco" onclick='a10892F(this)' />
<input name="MugSelect" type="radio" value="18oz" onclick='a10892F(this)' />
<input name="MugSelect" type="radio" value="glass" onclick='a10892F(this)' />
<input name="MugSelect" type="radio" value="15oz" onclick='a10892F(this)' />
<input name="MugSelect" type="radio" value="22oz" onclick='a10892F(this)' />
<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>
</form>
</body>

</html>

or

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
function a10892F() {
var rads=document.forms[0].MugSelect;
for (var val,z0=0;z0<rads.length;z0++){
if (rads[z0].checked){
val=rads[z0].value;
break;
}
}
var choice1 = "glass";
var choice2 = "deco";

if (val == choice1)
{
document.getElementById('a10892').innerHTML = 'Text to display if glass is chosen';
}
else if (val == choice2)
{
document.getElementById('a10892').innerHTML = 'text for display if deco was the choice';
}
else
{
document.getElementById('a10892').innerHTML = 'Default text for any other choice';
}

}
</script></head>

<body>
<form>
<input name="MugSelect" type="radio" value="deco" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="18oz" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="glass" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="15oz" onclick='a10892F()' />
<input name="MugSelect" type="radio" value="22oz" onclick='a10892F()' />
<div align="center" id="a10892">This is the text I want to change based on the radio selection</div>
</form>
</body>

</html>

IDs must be unique

radios of the same name form a collection(array)