Question

我编写了一个简单的脚本，在用户需要时添加额外的表单字段：html部分包含我定义表单字段模式的第一部分和准备插入模式的第二部分。

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

<form method="post" action="index.php">

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

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

</form>

javascript部分必须在“writeroot”跨度之前完全复制“readroot”div。它实际上复制了所有内容，除了输入字段的“名称”，“id”，“值”（或者，也许，我无法处理它们）。我还尝试使用onclick来检测字段名称之后被“放置”，但它没有返回正确的名字!!!

<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>

提前谢谢！

Answer 1

您正在以错误的方式设置click事件句柄。您正在立即调用alert，在此上下文中，this将引用window对象。

应该是：

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

似乎对我很好：http://jsfiddle.net/2KSds/

DOM

输入字段的name已正确更改，ID就在那里。如果您多次添加该元素，则还必须将baba ID和name ID更改为唯一的内容。

问题是你是否需要这些ID。你必须唯一地识别字段吗？使用类可能就足够了。类似的东西：

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

和

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);
}

然后，您可以通过为.fieldContainer设置CSS规则来控制可见性。

Answer 2

这似乎有效：

  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);
    }

我将计数器添加到newFields id并在警报中（更改为确认）使用了这个而不是newfields。

insertBefore之后忘记的childNodes特定值

2 个答案: