...

View Full Version : Problem with checkboxes created through a 'appendchild'



Zillon
05-27-2004, 01:36 AM
Hi all,

I am experiencing problems while trying to use a checkbox I've created with this code:



var nbCheckBox = 4;
var nbPlayers = 0;
var xmlEvents = new ActiveXObject("Microsoft.XMLDOM");

function OnLoad()
{
var i = 0;
var assault;
var defense;
var PlayerNodes;
var InputNode;
var TDNode;

for(i=0; i!=nbCheckBox; i++)
{
document.event.options[i].checked=true;
}

xmlEvents.async="false";
xmlEvents.load("Events.xml");


assault=document.getElementById('assaultplayers');
defense=document.getElementById('defenseplayers');
PlayerNodes=xmlEvents.getElementsByTagName("Player");
for(i=0; i!=PlayerNodes.length; i++)
{
NewNodeText= document.createTextNode(PlayerNodes.item(i).childNodes.item(0).text);
window.status = PlayerNodes.item(i).childNodes.item(0).text;
TDNode=document.createElement('td');
InputNode= document.createElement('input');
InputNode.type="checkbox";
InputNode.name="players"; TDNode.appendChild(NewNodeText);
TDNode.appendChild(InputNode);
if (PlayerNodes.item(i).childNodes.item(1).text==0)
{
assault.appendChild(TDNode);
}
else
{
defense.appendChild(TDNode);
}
nbPlayers++;
}

Redisplay();

}

In my HTML code, I have got something like this:


<form name="event" bgcolor="gray">
<pre>Display missed shots_____<input type="checkbox" name="options"></input></pre>
<pre>Display successful shots_<input type="checkbox" name="options"></input></pre>
(...)
<p><b>US Army: </b><table style="font-family: Arial; font-size: 9pt" cellspacing="10"> <tr id="assaultplayers"> </tr></table> </p>
<p><b>OP Forces: </b><table style="font-family: Arial; font-size: 9pt" cellspacing="10"> <tr id="defenseplayers"> </tr></table> </p>
</form>

So basically, I create some of the checkboxes manually (their name is 'options'), and some other ones during the execution (name:'players'). All the checkboxes are created, I can use the one called 'option' (with a
for(i=0; i!=nbCheckBox; i++)
{
document.event.options[i].checked=true;
}
for exemple), but when I try to access to document.event.players[0] (when the check box players[0] is created), I've got a script error telling me that document.event.players0 is a null object... Does anybody know wgere it comes from?

Thanks a lot

Zillon

sad69
05-27-2004, 05:34 PM
When you create your players checkboxes, you're not appending it directly under the event form, you're appending it to a TD.

You may be able to use document.forms['event'].elements['players'][i] and hopefully that works for you. If not, post back and we'll try something else.

Sadiq.

Zillon
05-27-2004, 10:27 PM
I had already tried without the TD, but I had the same problem. I tried with a
document.forms['event'].elements['players'][0].checked=true;
but had the same issue...

sad69
05-27-2004, 11:33 PM
Maybe it's bizzare, but you have to set the name in the createElement() method. Found this here:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20957751.html



...
InputNode= document.createElement('<input name="players">');
...


That should do it. If you alerted the innerHTML of the event form you would notice that you'd have checkboxes with no names...

Hope that helps,
Sadiq.

Zillon
05-27-2004, 11:42 PM
You're right, it is bizare:)
But it works, thanks a lot

Choopernickel
05-28-2004, 02:23 PM
That's odd. I've never had a problem assigning the name of an input of any type - except on radio buttons, for which I have a simple function that handles creation. Checkboxes have always worked just fine for me, in IE/Win and in Gecko.

Here are the "class" wrappers I use for creation:

function Radio (elName, val, chosen) {
if (document.all && document.getElementById) {
// IE radio buttons must be created in this manner to work properly. Proper detection of support is impossible. DAMN YOU IE.
var chk = '';
if (chosen) {
chk = ' checked="checked"';
}
this.element = document.createElement('<input type="radio" id="' + elName + val + '" name="' + elName + '" value="' + val + '"' + chk + '>');
} else {
this.element = document.createElement('input');
this.element.type = 'radio';
this.element.name = elName;
this.element.id = elName + val;
this.element.value = val;
if (chosen) {
this.element.checked = true;
}
}
return this;
}

function Checkbox (elName, val, chosen) {
this.element = document.createElement('input');
this.element.type = 'checkbox';
this.element.name = elName;
this.element.id = elName + val;
this.element.value = val;
this.element.checked = chosen;
return this;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum