JavaScript IE radio button problems
Hi all,
I have a small script that allows a user to toggle a line of radiobuttons. The script works perfectly in both Firefox and Opera, IE simply doesn't work.
The problem lies in the following statement:
Code:
function selectAll (dateIndicator, status)
{
form = document.forms['nmts'];
for (var i=1; i<=50; i++)
{
var radioButtonId = "" + dateIndicator + i;
if (form.elements [radioButtonId])
{
form.elements[radioButtonId][status].checked = true;
}
}
}
There are actually two problems in this code. The
form.elements [radioButtonId] apparently doesn't work to get to the appropriate element in the elements array. This can be bypassed by an additional loop (aarrghhh) over all elements and a check for the elements name agains the radioButtonId.
However, when I get to the correct element, all radios with the same name, but a different value are seen as one...
Anyone and ideas on how to fix this problem?
Thanks.
Full code of the page (quite a bit, apologies for that):
Code:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function selectAll (dateIndicator, status)
{
form = document.forms['nmts'];
for (var i=1; i<=50; i++)
{
var radioButtonId = "" + dateIndicator + i;
if (form.elements [radioButtonId])
{
form.elements[radioButtonId][status].checked = true;
}
}
}
//-->
</script>
</head>
<body>
<form name="nmts" method="post" action="/AllowForbid/updateNMTs.do">
<table border="1" cellpadding="5" cellspacing="0">
<tbody>
<tr bgcolor="#cccccc">
<td>Date</td>
<td> </td>
<td>2</td><td>3</td>
</tr>
<tr bgcolor="#eeeeee">
<td bgcolor="#eeeeee" valign="top">2003-10-01</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>
<a href="javascript:selectAll('2003-10-01', 0)"><img src="test_files/agt_action_fail.png" alt="[no data]" border="0"></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:selectAll('2003-10-01', 1)"><img src="test_files/gg_connecting.png" alt="[unavailable]" border="0"></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:selectAll('2003-10-01', 2)"><img src="test_files/agt_action_success.png" alt="[ok]" border="0"></a>
</td>
</tr>
</tbody></table>
</td>
<td>
<input id="2003-10-012" name="2003-10-012" value="2"
type="radio"><br><input
id="2003-10-012" name="2003-10-012" value="3"
type="radio"><br><input
id="2003-10-012" name="2003-10-012" value="1" checked="checked"
type="radio">
</td>
<td>
<input id="2003-10-013" name="2003-10-013" value="2"
type="radio"><br><input
id="2003-10-013" name="2003-10-013" value="3"
type="radio"><br><input
id="2003-10-013" name="2003-10-013" value="1" checked="checked"
type="radio">
</td>
</tr>
<tr bgcolor="#ffffff">
<td bgcolor="#eeeeee" valign="top">2003-10-02</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td>
<a href="javascript:selectAll('2003-10-02', 0)"><img src="test_files/agt_action_fail.png" alt="[no data]" border="0"></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:selectAll('2003-10-02', 1)"><img src="test_files/gg_connecting.png" alt="[unavailable]" border="0"></a>
</td>
</tr>
<tr>
<td>
<a href="javascript:selectAll('2003-10-02', 2)"><img src="test_files/agt_action_success.png" alt="[ok]" border="0"></a>
</td>
</tr>
</tbody></table>
</td>
<td>
<input id="2003-10-022" name="2003-10-022" value="2"
type="radio"><br><input
id="2003-10-022" name="2003-10-022" value="3"
type="radio"><br><input
id="2003-10-022" name="2003-10-022" value="1" checked="checked"
type="radio">
</td>
<td>
<input id="2003-10-023" name="2003-10-023" value="2"
type="radio"><br><input
id="2003-10-023" name="2003-10-023" value="3"
type="radio"><br><input
id="2003-10-023" name="2003-10-023" value="1" checked="checked"
type="radio">
</td>
</tr>
</tbody></table>
<input value="Submit" type="submit">
</form>
</body></html>
