how to set attribute "name"

Discussion in 'Javascript' started by Ding, Aug 22, 2007.

  1. Ding

    Ding Guest

    Hi, this is my code

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showhtml() {
    var divElement = document.createElement("div");
    var elem = document.createElement("input");
    elem.id="I001_ID_CHANGE";
    elem.name="I001_NAME_CHANGE";
    //elem.className="aaa";
    document.getElementById("TA001").value="ID: " + elem.id + "\nName: "
    + elem.name;
    divElement.appendChild(elem);
    document.getElementById("TA002").value=divElement.innerHTML;
    }
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    <input name="run" type="button" value="run code" onclick="showhtml()"/
    >

    <br/>
    <br/>
    <div id="D001" style="height:100%;width:100%;">
    <textarea id="TA001" rows="6" cols="80"></textarea>
    <br/>
    <textarea id="TA002" rows="6" cols="80"></textarea>
    </div>
    </BODY>
    </HTML>

    -----------------------------------------------
    for firefox it can set input name correctly, but ie can not set
    name!
    is there something like this:
    ie: element.setAttribute("className", "myCss");
    firefox: element.setAttribute("class", "myCss");


    thanks anyway
    Ding, Aug 22, 2007
    #1
    1. Advertising

  2. On Aug 21, 11:15 pm, Ding <> wrote:
    > -----------------------------------------------
    > is there something like this:
    > ie: element.setAttribute("className", "myCss");
    > firefox: element.setAttribute("class", "myCss");
    >


    IE chokes on setting the "name" attribute of an element that's already
    in the DOM. See: http://msdn.microsoft.com/library/d.../author/dhtml/reference/properties/name_2.asp
    for MSDN's article on the issue. Unfortunately, the only way to
    successfully do this is nonstandard and extremely bad practice. See
    http://www.easy-reader.net/archives/2005/09/02/death-to-bad-dom-implementations/
    for an example of what you're up against.

    Good luck!

    -David
    David Golightly, Aug 22, 2007
    #2
    1. Advertising

  3. Ding

    Ding Guest

    Thanks for the reply!
    I get it.
    Ding, Aug 23, 2007
    #3
  4. Ding

    RobG Guest

    On Aug 23, 2:48 am, David Golightly <> wrote:
    > On Aug 21, 11:15 pm, Ding <> wrote:
    >
    > > -----------------------------------------------
    > > is there something like this:
    > > ie: element.setAttribute("className", "myCss");
    > > firefox: element.setAttribute("class", "myCss");

    >
    > IE chokes on setting the "name" attribute of an element that's already
    > in the DOM. See:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dh...
    > for MSDN's article on the issue. Unfortunately, the only way to
    > successfully do this is nonstandard and extremely bad practice. Seehttp://www.easy-reader.net/archives/2005/09/02/death-to-bad-dom-imple...
    > for an example of what you're up against.


    I had a play with this, it seems that every solution uses either
    browser sniffing or try..catch with IE's version of createElement
    first then the W3C version second.

    As an alternative, I thought about adding an element with a name using
    W3C createElement, then trying to get it back using
    getElementsByTagName. If it works, use a W3C createElement method.
    If it fails, use an innerHTML based method for creating elements
    (rather than assuming IE and using its version of createElement, the
    string that needs to be constructed is the same).

    A simple test is here, based on the idea that the head element is
    always available to scripts, and that a meta element can have a name
    attribute and can be added to the head:

    function checkName() {
    var randomName = 'foo_' + (new Date()).getTime();
    var newElement = document.createElement('meta');
    newElement.name = randomName;
    document.getElementsByTagName('head')[0].appendChild(newElement);
    return !!(document.getElementsByName(randomName)[0])
    }

    alert("Use W3C createElement? " + checkName());


    It works in Firefox and IE 6 (all I have available at the moment).

    It's just a proof of concept and needs a lot more effort yet, but do
    you think it's a suitable feature test to use with a generic element
    builder function? It could be delayed using window.onload, but I
    think it should run as soon as possible.

    Incidentally, the authors of Prototype.js say they have fixed the IE
    name attribute issue with their new element builder functions, but
    they rely on browser sniffing (a reliance that seems to be an
    increasing in a number of libraries - v 1.6.0_rc0, #1579).


    --
    Rob
    RobG, Aug 23, 2007
    #4
  5. Ding

    Brian Adkins Guest

    On Aug 22, 12:48 pm, David Golightly <> wrote:
    > IE chokes on setting the "name" attribute of an element that's already
    > in the DOM. See:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dh...
    > for MSDN's article on the issue. Unfortunately, the only way to
    > successfully do this is nonstandard and extremely bad practice. Seehttp://www.easy-reader.net/archives/2005/09/02/death-to-bad-dom-imple...
    > for an example of what you're up against.


    Thanks for the tip. I found a comment on the blog referred to above
    that was close. I modified it to eliminate the assignment side effect
    and make it more functional, and I ran it through JSLint.

    Also, I had to use x.setAttribute('name', 'foo') instead of x.name =
    'foo' on Firefox 2.0.0.6 on Linux. I haven't tested my modifications
    on IE, but there shouldn't be any semantic changes, so if the original
    worked, this should also:

    var createElementWithName = (function () {
    try {
    var el = document.createElement('<div name="foo">');
    if (el.tagName !== 'DIV' || el.name !== 'foo') {
    throw 'create failed';
    }
    return function (tag, name) {
    return document.createElement('<' + tag + ' name="' + name +
    '"></' + tag + '>');
    };
    } catch (e) {
    return function (tag, name) {
    var el = document.createElement(tag);
    el.setAttribute('name', name);
    return el;
    };
    }
    })();
    Brian Adkins, Aug 24, 2007
    #5
  6. On Aug 24, 10:00 am, Brian Adkins <> wrote:
    > var createElementWithName = (function () {
    > try {
    > var el = document.createElement('<div name="foo">');
    > if (el.tagName !== 'DIV' || el.name !== 'foo') {
    > throw 'create failed';
    > }
    > return function (tag, name) {
    > return document.createElement('<' + tag + ' name="' + name +
    > '"></' + tag + '>');
    > };
    > } catch (e) {
    > return function (tag, name) {
    > var el = document.createElement(tag);
    > el.setAttribute('name', name);
    > return el;
    > };
    > }
    >
    > })();


    Yes, I really like this version. It's nice and clean and runs the
    check only once. Noted.

    -David
    David Golightly, Aug 25, 2007
    #6
  7. On Aug 24, 10:00 am, Brian Adkins <> wrote:
    > var createElementWithName = (function () {
    > try {
    > var el = document.createElement('<div name="foo">');
    > if (el.tagName !== 'DIV' || el.name !== 'foo') {
    > throw 'create failed';
    > }
    > return function (tag, name) {
    > return document.createElement('<' + tag + ' name="' + name +
    > '"></' + tag + '>');
    > };
    > } catch (e) {
    > return function (tag, name) {
    > var el = document.createElement(tag);
    > el.setAttribute('name', name);
    > return el;
    > };
    > }
    >
    > })();


    Oh, and you might want to take a look at Peter Michaux's lazy function
    definition pattern - this could be a good use case for it:
    http://peter.michaux.ca/article/3556

    -David
    David Golightly, Aug 25, 2007
    #7
  8. Ding

    Brian Adkins Guest

    On Aug 25, 11:59 am, David Golightly <> wrote:
    > Oh, and you might want to take a look at Peter Michaux's lazy function
    > definition pattern - this could be a good use case for it:http://peter.michaux.ca/article/3556
    >
    > -David


    Interesting. I use solution #2 frequently. I appreciated solution #3 -
    I hadn't thought of that. I'm unconvinced of the utility of solution
    #4, but it's certainly clever :)
    Brian Adkins, Aug 26, 2007
    #8
    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. =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=

    Invalid 'name' attribute name

    =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=, Jan 20, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    1,893
    =?Utf-8?B?QW5kZXJzIEphbnNzb24=?=
    Feb 14, 2006
  2. ding feng
    Replies:
    2
    Views:
    2,790
    ding feng
    Jun 25, 2003
  3. bprimuslevy
    Replies:
    1
    Views:
    429
    Soren Kuula
    Aug 23, 2006
  4. Pavils Jurjans
    Replies:
    3
    Views:
    173
    Pavils Jurjans
    Mar 18, 2005
  5. Walton
    Replies:
    4
    Views:
    113
    Walton
    Jun 8, 2007
Loading...

Share This Page