Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > form input elements and label. IE problem

Reply
Thread Tools

form input elements and label. IE problem

 
 
Ralph
Guest
Posts: n/a
 
      01-22-2007
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
--

Ralph
 
Reply With Quote
 
 
 
 
Ian Collins
Guest
Posts: n/a
 
      01-22-2007
Ralph wrote:
> 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?

--
Ian Collins.
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      01-22-2007
Ralph wrote:
> 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/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.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().


--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Separately Positioning Form Input Elements ? Mel Smith HTML 4 03-01-2009 03:27 AM
Positioning <form> Input elements ?? Mel Smith HTML 30 02-17-2009 04:37 PM
getting all the input elements of a form tag yawnmoth XML 1 07-16-2008 11:34 PM
newb: recurse over elements children and disable all form elements SteveKlett@gmail.com Javascript 4 09-20-2006 07:42 AM
why does form with only 1 text input and 1 button input submit on enter? Guy HTML 5 12-13-2003 06:44 AM



Advertisments