Results 1 to 2 of 2

Thread: Text Manipulation with radio buttons

  1. #1
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Text Manipulation with radio buttons

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,810
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    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)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •