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. Advertisements

  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. Advertisements

  3. mortb

    Grant Wagner Guest



    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. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.