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

M

mortb

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>
 
M

mortb

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>
 
G

Grant Wagner

mortb said:
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 <[email protected]>

* 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
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top