Ralph wrote:
Hi
I have small function to generate my form controls:
function buildInput(sTyp e, vValue, vId, sName, sLabel){
var oInput = null;
var oLabel = document.create Element('label' );
var oCont = document.create Element('span') ;
var oText = document.create TextNode(sLabel );
oInput = document.create Element('<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.create Element() method must be a tag name, not a string of
markup. To be standards compliant, replace the above line with:
oInput = document.create Element('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/com...2cbda3521fab6e
>
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.appendCh ild(oText);
oLabel.setAttri bute('for', vId);
oCont.appendChi ld(oInput);
oCont.appendChi ld(oLabel);
return oCont;
}
The function is generating code like this:
<SPAN><INPUT id="1062" type="radio" name="mainIntr" value="Televisi on" /><LABEL
for="1062">Tele vision</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(sTyp e, vValue, vId, sName, sLabel)
{
var oLabel = document.create Element('label' );
var oCont = document.create Element('span') ;
oCont.appendChi ld(oLabel);
oLabel.innerHTM L = '<input type=' + sType + ' value="' + vValue +
'" ' + ' id="' + vId + '" ' + ' name="' + sName + '">' + sLabel;
oLabel.setAttri bute('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() .
--
Rob
