Dynamic radiobuttons with labels in IE

[ronnil]

Just found an annoying thing in IE

I'm working on this neat little form framework giving me easy-coded forms with some automatic made fields, for instance a boolean field.

My original idea was to make this with radiobuttons, and put them in a nice little table for the pretty looks

function Boolean()
{
   this.container = document.createElement('table');
   var row = this.container.insertRow(this.container.rows.length);
   var trueCell = row.insertCell(row.cells.length);
   var falseCell = row.insertCell(row.cels.length);
 
   trueOpt = document.createElement('input');
   trueOpt.type = 'radio';
 
   falseOpt = document.createElement('input');
   falseOpt.type = 'radio';
 
   //set values and a bit other here
 
  /*
  now, DHTML doesn't allow dynamic makings of <label> so instead i figured out to implement it like this
  */
 
    trueLabel = '<label for='" + trueOpt.id + '">True</label>';
    trueCell.appendChild(trueOpt);
    trueCell.innerHTML = trueCell.innerHTML + trueLabel;
 
    //repeat with falsecell
}

This ofc works great in FF, but by altering the innerHTML of the trueCell, IE suddenly won't treat the input as a radio option. event's don't fire or anything

I tried with putting

if(trueOpt.attachEvent)
   trueOpt.attachEvent('onfocus',function(){trueOpt.checked=true});
 

both before and after the innerHTML statement, but without luck.

Easy fix is to use a selectbox with two different values ;D but I pretty much want to implement radiooptions with labels later on...

guess you could make a label like this:

function Label(id,value)
{
   document.write('<label id="'+id'">'+value+'</label>');
   return document.getElementById(id);
}
 

afterwards put this in trueCell with appendChild....

only problem is, this only works when the document is actually loaded i guess....

what do you guys think?

[ronnil]

heh... just struck me...

put the button and the label in two different cells... well duh! :)