Click here to Skip to main content
15,885,214 members
Home / Discussions / Linux, Apache, MySQL, PHP
   

Linux, Apache, MySQL, PHP

 
AnswerRe: Add two difference items to shopping card-Paypal Pin
vorotnik27-Jan-10 6:58
vorotnik27-Jan-10 6:58 
QuestionPython in Corpus Analysis Pin
ahmedshamim24-Dec-09 14:29
ahmedshamim24-Dec-09 14:29 
QuestionRadio Buttons Pin
thebiostyle24-Dec-09 8:56
thebiostyle24-Dec-09 8:56 
AnswerRe: Radio Buttons Pin
abushahin28-Dec-09 7:47
abushahin28-Dec-09 7:47 
GeneralRe: Radio Buttons Pin
thebiostyle28-Dec-09 10:34
thebiostyle28-Dec-09 10:34 
GeneralRe: Radio Buttons Pin
cjoki29-Dec-09 4:32
cjoki29-Dec-09 4:32 
GeneralRe: Radio Buttons Pin
abushahin31-Dec-09 7:45
abushahin31-Dec-09 7:45 
AnswerRe: Radio Buttons (long answer) Pin
enhzflep29-Dec-09 14:14
enhzflep29-Dec-09 14:14 
I always did enjoy creating custom controls.

Hope you can alter the code I came up with this morning to better suit your needs.

The steps I followed were:
(1) - create a non-functioning 'radio-button' using dreamweaver's design mode.
(2) - add a state attribute
(3) - alter the state for mouse over/out/click events
(4) - redraw the radio-button, using the appropriate image for it's state.
(5) - add a couple more buttons, ensure that the mouseover/out works for the new buttons
(6) - make a function that will create and append new radio-buttons for me.
(7) - modify the onclick routine so that all radio-buttons in the group are unchecked, before checking the one that recieved the onclick notification.

Hope I haven't forgotten anything too important above.

To use the supplied code, just save in a folder that contains rb1.png, rb2.png, rb3.png, rb4.png


<!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>Untitled Document</title>
<script type="text/javascript">
function byId(e){return document.getElementById(e);}
function byName(e){return document.getElementsByName(e);}
function changeState(el, stateMod){el.state ^= stateMod;}

function updateImg(el)
{
	imgs = Array("rb1.png", "rb2.png", "rb3.png", "rb4.png");
	el.src = imgs[el.state];
}

function toWord(num)
{
	var words = Array("zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine");
	return words[num];
}

function drawRadioGroup(groupName)
{
	var elements, i, count;
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
		updateImg(elements[i]);
}

function doClick(el)
{
	var elements, i, count;
	elements = byName(el.name);
	count = elements.length;
	for (i=0; i<count; i++)
	{
		elements[i].state &= 1;
		updateImg(elements[i]);
	}
	el.state |= 2;
	updateImg(el);
}

function getRadioGroupValue(groupName)
{	
	result = "none selected";
	elements = byName(groupName);
	count = elements.length;
	for (i=0; i<count; i++)
	{
		if (elements[i].state >= 2)
			result = elements[i].value;
	}
	return result;
}

function addRadioButton(groupName, optionValue, labelValue, tgtContainer)
{
	lblObj = document.createElement("label");
	lblText = document.createTextNode(labelValue);
	
	imgObj = document.createElement("img");
	imgObj.name = groupName;
	imgObj.src = "rb1.png";
	imgObj.width = "12";
	imgObj.height = "12";
	imgObj.value = optionValue;
	
	newLineObj = document.createElement("br");

	imgObj.onmouseout =  function(){ changeState(this, 1); updateImg(this); }  //onmouseout="changeState(this, 1); updateImg(this)"
	imgObj.onmouseover = function(){ changeState(this, 1); updateImg(this); }
	imgObj.onclick = function(){doClick(this);}
	
	lblObj.appendChild(imgObj);
	lblObj.appendChild(lblText);
	tgtContainer.appendChild(lblObj);
	tgtContainer.appendChild(newLineObj);
}

function createGroup(groupName, count)
{
	for (i=0; i<count; i++)
		addRadioButton(groupName, toWord(i), i, byId("radioHolder"));
}

function test2(){alert(getRadioGroupValue("radioGroup1"));}
</script>
</head>
<body onload="createGroup('radioGroup1', 10);">
	<div id="radioHolder"></div>
	<input type="button" value="get dynamic option" onclick="test2()"/><br/>
</body>
</html>


Happy New Year! Thumbs Up | :thumbsup:
GeneralRe: Radio Buttons (long answer) Pin
thebiostyle30-Dec-09 7:31
thebiostyle30-Dec-09 7:31 
GeneralRe: Radio Buttons (long answer) Pin
enhzflep30-Dec-09 11:56
enhzflep30-Dec-09 11:56 
GeneralRe: Radio Buttons (long answer) Pin
thebiostyle30-Dec-09 12:17
thebiostyle30-Dec-09 12:17 
GeneralRe: Radio Buttons Pin
enhzflep30-Dec-09 13:20
enhzflep30-Dec-09 13:20 
GeneralRe: Radio Buttons Pin
thebiostyle30-Dec-09 13:34
thebiostyle30-Dec-09 13:34 
GeneralRe: Radio Buttons [modified x2] Pin
enhzflep30-Dec-09 13:41
enhzflep30-Dec-09 13:41 
GeneralRe: Radio Buttons Pin
thebiostyle30-Dec-09 13:59
thebiostyle30-Dec-09 13:59 
GeneralRe: Radio Buttons Pin
enhzflep31-Dec-09 7:04
enhzflep31-Dec-09 7:04 
GeneralRe: Radio Buttons Pin
thebiostyle31-Dec-09 7:13
thebiostyle31-Dec-09 7:13 
GeneralRe: Radio Buttons Pin
enhzflep31-Dec-09 13:05
enhzflep31-Dec-09 13:05 
GeneralRe: Radio Buttons Pin
thebiostyle31-Dec-09 18:13
thebiostyle31-Dec-09 18:13 
GeneralRe: Radio Buttons [modified] Pin
enhzflep31-Dec-09 19:41
enhzflep31-Dec-09 19:41 
GeneralRe: Radio Buttons Pin
thebiostyle31-Dec-09 21:44
thebiostyle31-Dec-09 21:44 
QuestionFind the differences betwween two arrays Pin
Marc Firth24-Dec-09 0:51
Marc Firth24-Dec-09 0:51 
AnswerRe: Find the differences betwween two arrays Pin
Luc Pattyn28-Dec-09 10:43
sitebuilderLuc Pattyn28-Dec-09 10:43 
QuestionHow to use postback in php Pin
sarang_k23-Dec-09 22:28
sarang_k23-Dec-09 22:28 
AnswerRe: How to use postback in php Pin
Marc Firth24-Dec-09 1:25
Marc Firth24-Dec-09 1:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.