form input elements and label. IE problem

[Ralph]

Hi

I have small function to generate my form controls:

function buildInput(sType, vValue, vId, sName, sLabel){
var oInput = null;
var oLabel = document.createElement('label');
var oCont = document.createElement('span');
var oText = document.createTextNode(sLabel);
oInput = document.createElement('<input type="'+ sType +'" name="'+ sName +'" />');
oInput.id = vId;
oInput.value = vValue;
oLabel.appendChild(oText);
oLabel.setAttribute('for', vId);
oCont.appendChild(oInput);
oCont.appendChild(oLabel);
return oCont;
}

The function is generating code like this:

<SPAN><INPUT id="1062" type="radio" name="mainIntr" value="Television" /><LABEL
for="1062">Television</LABEL></SPAN>

The controls are generated OK but when i click the label next to radio button it's not selecting it.
On the other hand when i hard code the same code in my HTML file i can select the radio button by
clicking the label next to it.

How can I generate this code so it works?

PS: i have no problems with FF only IE.

Thank you

 

[Ian Collins]

Hi

I have small function to generate my form controls:

function buildInput(sType, vValue, vId, sName, sLabel){
var oInput = null;
var oLabel = document.createElement('label');
var oCont = document.createElement('span');
var oText = document.createTextNode(sLabel);
oInput = document.createElement('<input type="'+ sType +'" name="'+
sName +'" />');

Why create the element like this rather than create the input and then
set the attributes?

 

[RobG]

Hi

I have small function to generate my form controls:

function buildInput(sType, vValue, vId, sName, sLabel){
var oInput = null;
var oLabel = document.createElement('label');
var oCont = document.createElement('span');
var oText = document.createTextNode(sLabel);
oInput = document.createElement('<input type="'+ sType +'" name="'+ sName +'" />');

That is IE's special method of adding element, it is not compliant with
the W3C DOM Core specification. The argument to the
document.createElement() method must be a tag name, not a string of
markup. To be standards compliant, replace the above line with:

oInput = document.createElement('input');
oInput.name = sName;
oInput.type = sType;

However, it will still not work properly in IE, which is seriously
broken when it comes to adding form controls dynamically - one reason
is because it refuses to properly add the name attribute. Try this
thread with subject "Cross Browser Problem - IE can not find a dynamic
form" from April 2006:

<URL:
http://groups.google.co.uk/group/co...+name+dynamic+element&rnum=2#552cbda3521fab6e
Also, in this case the radio buttons are unselectable (probably because
of the name issue).

The usual trick is to add controls in the HTML and manage them
dynamically by hiding or showing and disabling or enabling them as
appropriate.

oInput.id = vId;
oInput.value = vValue;
oLabel.appendChild(oText);
oLabel.setAttribute('for', vId);
oCont.appendChild(oInput);
oCont.appendChild(oLabel);
return oCont;
}

The function is generating code like this:

<SPAN><INPUT id="1062" type="radio" name="mainIntr" value="Television" /><LABEL
for="1062">Television</LABEL></SPAN>

To be valid HTML, an id must not start with a number - but that is
irrelevant to the issue.

Incidentally, you may as well drop the faux XHTML markup, IE doesn't
understand it. Just use HTML 4.01 strict.

The controls are generated OK but when i click the label next to radio button it's not selecting it.
On the other hand when i hard code the same code in my HTML file i can select the radio button by
clicking the label next to it.

How can I generate this code so it works?

You can try innerHTML, an ugly hack that you should thoroughly test,
but it seems to work in IE, Firefox and Opera. The labels still won't
work properly in IE:

function buildInput(sType, vValue, vId, sName, sLabel)
{
var oLabel = document.createElement('label');
var oCont = document.createElement('span');
oCont.appendChild(oLabel);
oLabel.innerHTML = '<input type=' + sType + ' value="' + vValue +
'" ' + ' id="' + vId + '" ' + ' name="' + sName + '">' + sLabel;
oLabel.setAttribute('for', vId);

return oCont;

}

If this is for general use, you'll need to make some of those
attributes conditional on whether they've been supplied or not (e.g.
you may not want a label every time you generate an input element).

PS: i have no problems with FF only IE.

The original code doesn't work at all in Firefox, it just errors out
because Firefox doesn't support the use of markup as an argument to
createElement().