Text Manipulation with radio buttons

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

Code:

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

Code:

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

Code:

<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

Code:

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

Code:

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

Thread: Text Manipulation with radio buttons

Thread Tools

Search Thread

Text Manipulation with radio buttons

Bookmarks

Bookmarks

Posting Permissions