bug 199 - can't clone a form element in IE using .cloneNode

Issue: #199
Affects: IE6, IE7, IE8

Well, yes you can clone a form element in IE using .cloneNode() but it won't work the way you need it to work.

It seems that the readonly bugs (bug 235, bug 237) for form elements affects more than just the .createElement() and .setAttribute() methods.

When you clone a node (e.g. a Form Input Element), it will obviously have a name. However that cloned element will have the same name, and it too will be readonly.

Example:

<script type="text/javascript">
  function cloneEmail(quantity){
    var emailAddr = document.getElementById('emailAddressTemplate');
    //clone it!
    var newInput = null;
    var myForm = document.getElementsByTagName('form')[0];
    for(var i=0;i<quantity;i++){
      newInput = emailAddr.cloneNode(false);
      newInput.setAttribute('name', 'emailAddr' + (i + 1));
      myForm.appendChild(newInput);
    }
  }
</script>

Attempting to change the name in this manner will fail in IE. Calling the following will change the name for the HTTP Get/Post param name, but it won't be accessible to JavaScript by name.

  newInput.name = 'emailAddr' + (i + 1); 

Known Workarounds: None.

Related Issues: (bug 235, bug 237).

Bug/Site Feedback |
Submit a bug