childNodes specific values forgotten after insertBefore

I wrote a simple script that add extra form fields when needed by the user: the html part consist of a first section where I define a form field pattern and a second part, ready for the insertion of the pattern.

<div id="readroot" style="display: none">
    <input type="text" value="test" id="name" name="name">
</div>

<form method="post" action="index.开发者_JAVA技巧php">

    <span id="writeroot"></span>

    <a href=# onclick="moreFields();">Add record</a>
    <input type="submit" value="Confirm" />

</form>

The javascript part would have to exactly replicate the "readroot" div just before the "writeroot" span. It replicates everything, indeed, except the "name", "id", value" of the input fields (or, maybe, I'm not able to handle them). I also tried putting an onclick to detect the field name after it's been "placed", but it doesn't return the correct name!!!

<script type="text/javascript">
  var counter = 0;
  window.onload = moreFields();

  function moreFields() {
     counter++;
     var newFields = document.getElementById('readroot').cloneNode(true);
     newFields.id = 'baba';
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
           newField[i].name = theName + counter;
           newField[i].onclick = alert(this.name);
    }
    var insertHere = document.getElementById('writeroot');
    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
    }
</script>

Thank you in advance!

---

Your are setting the click event handle the wrong way. You are calling alert immediately and in this context , this will refer to the window object.

It should be:

newField[i].onclick = function() {alert(this.name);};

Seems to work fine for me: http://jsfiddle.net/2KSds/

The name of the input field is correctly changed and the id is there. If you add the element more that one time you also have to change the baba id and the name id to something unique.

---

The question is whether you need the IDs at all. Do you have to uniquely identify the fields? Using classes might be sufficient. Something like:

<div id="readroot" style="display: none">
    <input type="text" value="test" name="name" class="inputClass">
</div>

and

var readroot = document.getElementById('readroot'),
    writeroot = document.getElementById('writeroot');

function moreFields() {
     counter++;
     var newFields = readroot.cloneNode(true);
     newFields.removeAttribute('id');
     newFields.className += 'fieldContainer';

     var newFields = newFields.childNodes;
     for (var i = 0, l = newField.length; i < l; i++) {
        var theName = newField[i].name;
        if (theName) {
           newField[i].name = theName + counter;
        }
        newField[i].onclick = function() {alert(this.name);}
     }
     inserted = writeroot.parentNode.insertBefore(newFields,writeroot);
}

You can then control the visibility through setting CSS rules for .fieldContainer.

---

This appears to work :

  var counter = 0;
  window.onload = moreFields();

  function moreFields() {
     counter++;
     var newFields = document.getElementById('readroot').cloneNode(true);
     newFields.id = 'baba' + counter;
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var theName, i = newField.length; i--;) {
        if (theName = newField[i].name) {
           newField[i].name = theName + counter;
           newField[i].onclick = confirm (newField[i].name);
        }   
    }
    var insertHere = document.getElementById('writeroot');
    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
    }

I added the counter to the newFields id and in the alert (changed to confirm) you used this instead of newfields.