JavaScript IE radio button problems


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: JavaScript IE radio button problems

Hybrid View

  1. #1
    Join Date
    Oct 2006
    Posts
    1

    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>&nbsp;</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>

  2. #2
    Join Date
    Mar 2005
    Posts
    21
    Try following script:
    <!--
    function selectAll (dateIndicator, status)
    {
    form = document.forms['nmts'];
    for (var i=1; i<=50; i++)
    {
    var radioButtonId = "" + dateIndicator + i;
    //if (form.elements [radioButtonId])
    //{
    document.getElementById(radioButtonId).setAttribute("Checked","true");
    //}
    }
    }
    //-->
    Innovation Makes Life Better.

Similar Threads

  1. radio button inside datagrid
    By Balaji N.S in forum .NET
    Replies: 3
    Last Post: 02-17-2007, 02:36 PM
  2. Replies: 0
    Last Post: 02-10-2006, 10:15 AM
  3. problems with javascript
    By Michael in forum ASP.NET
    Replies: 10
    Last Post: 11-08-2005, 12:19 PM
  4. Replies: 2
    Last Post: 04-28-2005, 09:31 AM
  5. Replies: 0
    Last Post: 10-11-2002, 01:16 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center