Setting the “name” attribute in Internet Explorer

39 responses

Other comment pages: « 1 [2]

• Bennett -

  Indeed this, along with number of other long-standing bugs / issues with the DOM, have not been fixed in IE7. See the third message on this blog post from Dave Massy, program manager at Microsoft from another irate developer ;-). He details all of the ones he knows about that haven’t been fixed yet:

  http://blogs.msdn.com/dmassy/archive/2006/11/30/vpc-to-run-ie6-and-ie7-on-the-same-machine.aspx

  Cheers,

  - Bill

  William J. Edney | 11 January 2007

• It would be much better to check the correct way of creating an element on a specific browser/user-agent only once and not on every single createNamedElement call.

  You should use something like this:

  var createNamedElement=function (){};
  (function () {
  try {
  var el=document.createElement(”); //IE nasty way of creating named elements
  if (el.tagName != ‘DIV’ || el.name != ‘foo’) { throw ‘create element error’; }
  /* else… */
  createNamedElement = function (tag, name) {
  return document.createElement(”);
  };
  } catch (e) { //Good ol’ compliants way
  createNamedElement = function (tag, name) {
  var el = document.createElement(tag); el.name = name; return el;
  }
  }
  })();

  Amplexos.

  diego nunes | 24 January 2007

• Diego, your approach is inefficient if you only plan to call the createNamedElement function a small number of times (as I do). Your method would indeed be more efficient if you were doing a lot of page manipulation for each page load — in that case the extra speed would be worth the added complexity.

  Bennett | 24 January 2007

• Thanks for this. Ghod, I hate IE6 sometimes.

  I discovered that the same thing is (apparently) true for the “checked” property. I modified your function slightly to accommodate a “checked” parameter:

  function createNamedElement( type, name, checked ) {

  // Did you know that the IE6 dev team’s DNA is 98% similar to that of humans?

  var element = null;

  // Try the IE way; this fails on standards-compliant browsers
  try {
  element = document.createElement( ” );
  } catch (e) {
  }

  if (!element || element.nodeName != type.toUpperCase()) {
  // Non-IE browser; use canonical method to create named element
  element = document.createElement(type);
  element.name = name;
  element.checked = checked;
  }
  return element;
  }

  greenie2600 | 29 May 2007

• I LOVE YOU FOR POSTING THIS ARTICLE!

  bhaidaya | 10 August 2007

• Well, thank you. Even though I wrote this 2 years ago, it’s still relevant today. Last week at work we had a mysterious problem with our web application failing on IE. I pointed the developer at this page and 10 minutes later he had fixed it!

  Bennett | 10 August 2007

• It has just occurred to me that the function as written may not work if your page is served as application/xhtml+xml. I haven’t tested it, but it seems to me that if your page is served as application/xhtml+xml then you should remove the “.toUpperCase()” from the function.

  If you try this, please let me know how it turns out.

  Bennett | 10 August 2007

• Bless you for this article! and Thanks a ton!

  nj | 1 September 2007

• It works…! I was having trouble accessing the dynamically created form elements…Well,it’s solved now..Thanks!

  Jobin Basani | 3 September 2007

• /*
  This seems to work to create new input elements across browsers, but I welcome your opinions.
  parameters: (pa) a reference to the parent node of the new input, and (attr) an attributes object.
  */

  function Fieldname(pa,attr){
  var el= document.createElement(’input’);
  for(var p in attr) el[p]= attr[p];
  pa.appendChild(el);
  if(el.name) return el;

  //if the ‘name’ was not set, as in IE:
  var el2= document.createElement(’span’);
  var str= ”;
  pa.replaceChild(el2,el);
  return el2.firstChild;
  }
  //test case
  var el= new Fieldname(document.body,
  {type:’text’, name:’newInput’, size:’10′,
  onchange:function(){alert(this.name)}})

  //In practice, the first parameter would refer to a label or fieldset or form element

  mrHoo | 26 October 2007

• error S:

  ttnet müzik | 4 January 2008

• //if the ‘error’ was not set, as in IE:
  var el2= document.createElement(’span’);
  var str= ”;
  pa.replaceChild(el2,el);
  return el2.firstChild;
  }

  ttnet mp3 | 4 January 2008

• I think I may have found another way around this bug.

  I posted the solution I found on my web development blog here:
  http://matts411.com/webdev/cre…..javascript

  Let me know what you guys think.

  Matt

  Matt Murphy | 14 January 2008

• @Pablo

  You can not set an onclick on an element in IE as an attribute. This is because IE does not see it as an attribute, but as an object. Try e.g.:
  eval(”elem.onclick=’myScript()’”)

  Bert Zwep | 16 January 2008

• Although still far from perfect, this would be a better solution, only applying the hack to IE, and letting the other browsers work as designed:

  var isOpera, isIE = false;
  if(typeof(window.opera) != ‘undefined’){isOpera = true;}
  if(!isOpera && navigator.userAgent.indexOf(’Internet Explorer’)){isIE = true);

  function createNamedElement(type, name, checked){
  var element = document.createElement(type);
  if(name){
  element.setAttribute(’name’, name);
  }
  if(checked){
  element.setAttribute(’checked’, ‘checked’);
  }
  return element;
  }

  //fix IE
  if(isIE){
  function createNamedElement(type, name, checked){
  var elemStr = ”;
  return document.createElement(elemStr);
  }
  }

  With this, the function is redefined if IE, to handle its broken DOM.

  Harvey | 10 February 2008

• To set an attribute
  I use getAttribute(”XXX”).value.

  ex:
  var pass = document.getElementById(’txtPassword’); pass.getAttribute(”onfocus”).value = “javascript:blabla()”;

  Tested and worked on FF, IE7, IE6, IE5.5 ….

  tiago.santos | 23 February 2008

• Thanks a million for this, I was pulling my hair out trying to get a image slide show to work in IE 7. Turns out it was because of this stupid createElement bug!

  Stephen Burns | 28 May 2008

• Welcome to the painful world of IE development!

  This is just one of the dozens of attributes you CANT set in IE.

  See here for complete details.
  http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

  There’s actually a lot of good info on this site. I highly recommend an extensive read.

  Domenic | 17 July 2008

• Thanks a lot for the explanation. You may have to update the link to MSDN. They take to content not found page.

  Kumar Chetan Sharma | 29 July 2008

• Thanks for that! I have updated the links. Every so often Microsoft reorganise MSDN and break all their “perma”links.

  Bennett | 29 July 2008

Other comment pages: « 1 [2]