Radio Buttons

DaZZleD · May 20, 2005

Hi.

I have a page where I want to create some radio buttons dynamically. After adding them to the page, they don't seem to react in any way to user interaction (meaning they won't check when clicked or anything).

Has anyone an idea of what could be wrong?

Thanks.

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage

adam0101 · May 20, 2005

Can you post the code or a url?

Adam

¡ph ¥0u c4n r34d d¡5 ¥0u n33d 70 g37 l4¡d

BillyRayPreachersSon · May 20, 2005

Do you have any floating or absolutely positioned elements that could be invisibly obstructing the radio buttons?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

DaZZleD · May 20, 2005

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Test</title>
</head>

<body>
<script type="text/javascript">
function test() {
    var tr = document.createElement("tr");
    var td = document.createElement("td");
    tr.appendChild(td);
   
    // add a radio button
    var addRadio = document.createElement("input");
    addRadio.setAttribute("type", "radio");
    addRadio.setAttribute("name", "pleaseWork");
    td.appendChild(addRadio);
   
    var td2 = document.createElement("td");
    tr.appendChild(td2);
    document.getElementById("foo").appendChild(tr);
}
</script>

<table>
<tbody id="foo"></tbody>
</table>
<button type="button" onclick="test()">Add Row</button>
<br /><br />
<input type="radio" name="foo" value=""> Try me - I work!
</body>
</html>

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage

BillyRayPreachersSon · May 20, 2005

It looks like IE is buggy when it comes to creating radio buttons dynamically using standard methods. Using non-standard IE methods, it is fine... so a hack that works for both IE and other browsers would be:

Code:

<html>
<head>
	<script type="text/javascript">
	<!--
		function createRadioElement(radioName, radioValue) {
			if (document.all) {
				return(document.createElement('<input type="radio" name="' + radioName + '" value="' + radioValue + '">'));
			} else {
				var tempRadio = document.createElement('input');
				tempRadio.setAttribute('type', "radio");
				tempRadio.setAttribute('name', radioName);
				tempRadio.setAttribute('value', radioValue);
				return(tempRadio);
			}
		}

		function addRadios() {
			document.forms[0].appendChild(createRadioElement('pleaseWork', 'value1'));
			document.forms[0].appendChild(createRadioElement('pleaseWork', 'value2'));
		}
	//-->
	</script>
</head>

<body onload="addRadios();">
	<form></form>
</body>
</html>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Radio Buttons

DaZZleD

Programmer

adam0101

Programmer

BillyRayPreachersSon

Programmer

DaZZleD

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor