Matt's 411

A Web Developer's Blog · Javascript, CSS, HTML and more

  • Setting the name attribute in IE's DOM

    Thursday, May 28, 2009·Share
    • Facebook
    • ·
    • Google Plus
    • ·
    • LinkedIn
    • ·
    • StumbleUpon
    • ·
    • Twitter
    ·Comments

    An old problem with IE is that you can't set the name attribute on form elements in the DOM directly. Fortunately there is a workaround to this issue using IE's mergeAttributes method. By creating a temporary named element acceptable by IE's createElement method, you can merge the name attribute into the element you desire, allowing you to name or rename an element. An example demo follows.

    var setName = function(el, newName) {
      el = (typeof el === "string") ? document.getElementById(el) : el;
      el.name = newName;
      if (/*@cc_on!@*/0) { // Internet Explorer test (needs to be modified for IE8)
        el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
      }
    };
    

    In Mootools 1.2.1:

    var setName = function(elementId, newName) {
      var el = (!!elementId) ? $(elementId) : null;
      if (!elementId || !newName || !el) return;
      
      el.set({ "name" : newName });
      if (Browser.Engine.trident4 || Browser.Engine.trident5) {
        el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
      }
    };
    

Latest Posts

  • Internet Explorer localStorage polyfill using userData
  • Autocomplete with <datalist>
  • Internet Explorer 9 oninput event
  • Grid Updated
  • Canvas Pie and Ring Charts with Tooltips
  • Receive an SMS via Twilio When Your Website Goes Down
  • Comments with Disqus.com
  • Disabling Spellcheck in Textarea Elements
  • Setting the name attribute in IE's DOM
  • Recent Activity
  • Tips for Web Developers
  • Delaying Javascript Event Execution
  • Auto Selecting HTML Text with Javascript