Urgent: Why doesn't this work - dynamically created radio buttons

Discussion in 'Javascript' started by mortb, Jul 1, 2004.

  1. mortb

    mortb Guest

    I create a table containing radiobuttons in client script depending on
    what choices the user makes.
    It works fine the radio buttons appear *but* they are *not clickable*.
    Why? Is there a solution?
    I'm using IE 6.0

    cheers,
    mortb

    actual code included (cut from a larger page):

    <script language='javascript'>
    var GUIArr = new Array(new Array('gui1',36,'type1',16,16), new
    Array('gui2',37,'type1',16,16))
    </script>
    <html>
    <body>
    <form>
    <script language="javascript">
    function populateGUIRadioList()
    {
    var table =
    document.frmIcon.getElementById("radioTab");
    // alert(table.rows.length);
    //alert(document.getElementById("searchGUIType").value)
    var TRs = table.getElementsByTagName("tr");
    // alert(TRs.length);
    var len = TRs.length;
    for(i=0;i < len; i++)
    {
    table.deleteRow();
    }
    var GUIType =
    document.getElementById("searchGUIType").value;
    var GUIWidth =
    document.getElementById("searchGUIWidth").value.replace(/[^0-9]./,
    "");
    var GUIHeight =
    document.getElementById("searchGUIHeight").value.replace(/[^0-9]./,
    "");
    //alert(document.getElementById("searchGUIType").value);
    for(i = 0; i < GUIArr.length; i ++)
    {
    if((GUIType == "" ||GUIType == GUIArr[2])
    && (GUIWidth == "" ||GUIWidth == GUIArr[3])
    && (GUIHeight == "" ||GUIHeight ==
    GUIArr[4]))
    {
    var row =
    table.insertRow();//document.createElement("tr");
    var cell = document.createElement("td");
    var text =
    document.createTextNode(GUIArr[0] + " - " + GUIArr[2] + " " +
    GUIArr[3] + " x " + GUIArr[4]);
    var rdbtn =
    document.createElement("input");
    rdbtn.type = "radio";
    rdbtn.value = GUIArr[1];
    rdbtn.name = "displayGUIObject";
    cell.appendChild(rdbtn);
    cell.appendChild(text);
    row.appendChild(cell);
    }
    }
    }
    </script>
    <input type="text" id="searchGUIWidth" maxlength="4"
    size="4" onkeyup="populateGUIRadioList()"> x
    <input type="text" id="searchGUIHeight" maxlength="4"
    size="4" onkeyup="populateGUIRadioList()">
    <select id="searchGUIType"
    onchange="populateGUIRadioList()">
    <option value="">&lt;All types&gt;</option>
    <option value="type1">type1</option>
    <option value="<= 256 Colors">Icon &lt;=256</option>
    <option value="> 256 Colors">Icon &gt;256</option>
    </select>
    <table id="radioTab">
    </table>
    </form>
    </body>
    </html>
    mortb, Jul 1, 2004
    #1
    1. Advertising

  2. mortb

    mortb Guest

    Sorry I've posted the wrong version previously.
    This is the right one, but the radio buttons still don't work

    /mortb


    <script language='javascript'>
    var GUIArr = new Array(new Array('gui1',36,'type1',16,16), new
    Array('gui2',37,'type1',16,16))
    </script>
    <html>
    <body>
    <form>
    <script language="javascript">
    function populateGUIRadioList()
    {
    var table = document.getElementById("radioTab");
    // alert(table.rows.length);
    //alert(document.getElementById("searchGUIType").value)
    var TRs = table.getElementsByTagName("tr");
    // alert(TRs.length);
    var len = TRs.length;
    for(i=0;i < len; i++)
    {
    table.deleteRow();
    }
    var GUIType =
    document.getElementById("searchGUIType").value;
    var GUIWidth =
    document.getElementById("searchGUIWidth").value.replace(/[^0-9]./,
    "");
    var GUIHeight =
    document.getElementById("searchGUIHeight").value.replace(/[^0-9]./,
    "");
    //alert(document.getElementById("searchGUIType").value);
    for(i = 0; i < GUIArr.length; i ++)
    {
    if((GUIType == "" ||GUIType == GUIArr[2])
    && (GUIWidth == "" ||GUIWidth == GUIArr[3])
    && (GUIHeight == "" ||GUIHeight ==
    GUIArr[4]))
    {
    var row =
    table.insertRow();//document.createElement("tr");
    var cell = document.createElement("td");
    var text =
    document.createTextNode(GUIArr[0] + " - " + GUIArr[2] + " " +
    GUIArr[3] + " x " + GUIArr[4]);
    var rdbtn =
    document.createElement("input");
    rdbtn.type = "radio";
    rdbtn.value = GUIArr[1];
    rdbtn.name = "displayGUIObject";
    cell.appendChild(rdbtn);
    cell.appendChild(text);
    row.appendChild(cell);
    }
    }
    }
    </script>
    <input type="text" id="searchGUIWidth" maxlength="4"
    size="4" onkeyup="populateGUIRadioList()"> x
    <input type="text" id="searchGUIHeight" maxlength="4"
    size="4" onkeyup="populateGUIRadioList()">
    <select id="searchGUIType"
    onchange="populateGUIRadioList()">
    <option value="">&lt;All types&gt;</option>
    <option value="type1">type1</option>
    <option value="<= 256 Colors">Icon &lt;=256</option>
    <option value="> 256 Colors">Icon &gt;256</option>
    </select>
    <table id="radioTab">
    </table>
    </form>
    </body>
    </html>
    mortb, Jul 2, 2004
    #2
    1. Advertising

  3. mortb

    Grant Wagner Guest

    mortb wrote:

    > Sorry I've posted the wrong version previously.
    > This is the right one, but the radio buttons still don't work
    >
    > /mortb
    >
    >
    > <script language='javascript'>
    > var GUIArr = new Array(new Array('gui1',36,'type1',16,16), new
    > Array('gui2',37,'type1',16,16))
    > </script>
    > <html>
    > <body>
    > <form>
    > <script language="javascript">
    > function populateGUIRadioList()
    > {
    > var table = document.getElementById("radioTab");
    > // alert(table.rows.length);
    > //alert(document.getElementById("searchGUIType").value)
    > var TRs = table.getElementsByTagName("tr");
    > // alert(TRs.length);
    > var len = TRs.length;
    > for(i=0;i < len; i++)
    > {
    > table.deleteRow();
    > }
    > var GUIType =
    > document.getElementById("searchGUIType").value;
    > var GUIWidth =
    > document.getElementById("searchGUIWidth").value.replace(/[^0-9]./,
    > "");
    > var GUIHeight =
    > document.getElementById("searchGUIHeight").value.replace(/[^0-9]./,
    > "");
    > //alert(document.getElementById("searchGUIType").value);
    > for(i = 0; i < GUIArr.length; i ++)
    > {
    > if((GUIType == "" ||GUIType == GUIArr[2])
    > && (GUIWidth == "" ||GUIWidth == GUIArr[3])
    > && (GUIHeight == "" ||GUIHeight ==
    > GUIArr[4]))
    > {
    > var row =
    > table.insertRow();//document.createElement("tr");
    > var cell = document.createElement("td");
    > var text =
    > document.createTextNode(GUIArr[0] + " - " + GUIArr[2] + " " +
    > GUIArr[3] + " x " + GUIArr[4]);
    > var rdbtn =
    > document.createElement("input");
    > rdbtn.type = "radio";
    > rdbtn.value = GUIArr[1];
    > rdbtn.name = "displayGUIObject";
    > cell.appendChild(rdbtn);
    > cell.appendChild(text);
    > row.appendChild(cell);
    > }
    > }
    > }
    > </script>
    > <input type="text" id="searchGUIWidth" maxlength="4"
    > size="4" onkeyup="populateGUIRadioList()"> x
    > <input type="text" id="searchGUIHeight" maxlength="4"
    > size="4" onkeyup="populateGUIRadioList()">
    > <select id="searchGUIType"
    > onchange="populateGUIRadioList()">
    > <option value="">&lt;All types&gt;</option>
    > <option value="type1">type1</option>
    > <option value="<= 256 Colors">Icon &lt;=256</option>
    > <option value="> 256 Colors">Icon &gt;256</option>
    > </select>
    > <table id="radioTab">
    > </table>
    > </form>
    > </body>
    > </html>


    Doesn't do anything here in either IE6SP1 or Firefox 0.9.1.

    Usually it's best to break the problem down into the simplest example that
    demonstrates the behaviour you are seeing. Doing this allows people to help you,
    it sometimes also allows you to pinpoint the problem yourself.

    Also, although it has nothing to do with your problem, <script> should always
    appear inside <head></head> or <body></body>. Specifying <script> tags outside
    of everything, including the <html> tags allows some user agents to completely
    ignore the code (although that is not the case with the more popular user
    agents, it's still a bad design choice).

    So provide a working example and someone may be able to assist you.

    --
    | Grant Wagner <>

    * Client-side Javascript and Netscape 4 DOM Reference available at:
    *
    http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

    * Internet Explorer DOM Reference available at:
    *
    http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

    * Netscape 6/7 DOM Reference available at:
    * http://www.mozilla.org/docs/dom/domref/
    * Tips for upgrading JavaScript for Netscape 7 / Mozilla
    * http://www.mozilla.org/docs/web-developer/upgrade_2.html
    Grant Wagner, Jul 2, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shadow Lynx
    Replies:
    0
    Views:
    626
    Shadow Lynx
    Jul 31, 2006
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,804
    Smokey Grindel
    Dec 2, 2006
  3. msimmons
    Replies:
    0
    Views:
    470
    msimmons
    Jul 16, 2009
  4. Dr. Leff
    Replies:
    3
    Views:
    290
    David Mark
    Oct 15, 2007
  5. Dr. Leff
    Replies:
    3
    Views:
    222
    David Mark
    Oct 15, 2007
Loading...

Share This Page