form input elements and label. IE problem

Discussion in 'Javascript' started by Ralph, Jan 22, 2007.

  1. Ralph

    Ralph Guest

    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
    Ralph, Jan 22, 2007
    #1
    1. Advertising

  2. Ralph

    Ian Collins Guest

    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.
    Ian Collins, Jan 22, 2007
    #2
    1. Advertising

  3. Ralph

    RobG Guest

    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/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().


    --
    Rob
    RobG, Jan 22, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Shapper
    Replies:
    2
    Views:
    729
    Scott Mitchell [MVP]
    May 7, 2005
  2. Josef K.

    <label><div></div></label> allowed?

    Josef K., May 20, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    13,382
    Josef K.
    May 22, 2005
  3. CSharpner
    Replies:
    0
    Views:
    1,011
    CSharpner
    Apr 9, 2007
  4. Replies:
    4
    Views:
    183
  5. Knut Krueger
    Replies:
    8
    Views:
    263
    Knut Krueger
    Aug 20, 2013
Loading...

Share This Page