更改嵌套在动态表单条目的克隆表中的输入/选择字段的名称属性-Javascript_Javascript_Html_Forms

更改嵌套在动态表单条目的克隆表中的输入/选择字段的名称属性-Javascript

javascript html forms

更改嵌套在动态表单条目的克隆表中的输入/选择字段的名称属性-Javascript,javascript,html,forms,Javascript,Html,Forms,我正在设计一个动态输入表单，它本质上充当在mysql数据库中创建表的用户GUI Javascript文件 var counter = 0; function moreFields() { counter++; var newFields = document.getElementById('poptemplate').cloneNode(true); newFields.id = ''; newFields.style.display = 'block';

我正在设计一个动态输入表单，它本质上充当在mysql数据库中创建表的用户GUI

Javascript文件

var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('poptemplate').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var fieldname = newField[i].name;
        if (fieldname){
            newField[i].name = fieldname + counter;
            }
    }
    var insertHere = document.getElementById('catidtable');
    insertHere.parentNode.appendChild(newFields);
    }
window.onload = moreFields;

需求更新：

目前，尝试2似乎很有希望，但缺少了一些东西。它成功克隆了模板，但捕获选择和输入元素的过程没有成功

原件：

我正在寻找一种解决方案来修补已提供的for循环，以便深入研究或替代代码，该代码不会中断克隆过程，但会另外更改名称属性。我所有修改此代码以深入遍历的尝试都导致代码在执行时中断

这是我在这里的第一篇文章，我发现stackoverflow非常有帮助，我希望我的问题和解决方案能帮助其他人更好地学习和理解。感谢您在advanced中提供的帮助。

已编辑以包含本地代码

您不仅需要克隆行，还需要为要发布的表单为每个项指定一个唯一的名称，否则将重写数据。每个字段名必须是唯一的

简单的方法是在克隆副本上使用计数器

以下是一个示例：

var counter = 0;
function moreFields() {
while(counter<10){
counter++;
var index, inputs;
var newFields = document.getElementById('poptemplate').cloneNode(true);
newFields.id = 'clone'+counter;
newFields.style.display = 'block';
var newField = newFields.childNodes;
 var insertHere = document.getElementById('catidtable');
insertHere.parentNode.appendChild(newFields);
// now update it
container = document.getElementById('clone'+counter);
// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
    inputs[index].name =  inputs[index].name + counter;
    inputs[index].value =  inputs[index].name + counter;
}   
}
}
window.onload = moreFields;



<div id="poptemplate" style="display:none">
<table border="3" id="template">
<tr>
    <td>Field Name:</td>
    <td><input class="renameme" form="catform" type="text" name="fieldname_input" />    </td>
</tr>
<tr id="tr1">
    <td id="td1" colspan='2'><input type="button" value="Remove Field" onclick="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);" /></td>
</tr>
</table>
</div>

<br>

<table id="catidtable">
</table>

var计数器=0；
函数moreFields（）{
虽然（counter我感谢briansol
帮助我完成结构示例。该代码是我问题的有效解决方案。对briansol原始代码示例的编辑包括从容器
分配中删除+counter
。Firefox的开发人员控制台允许我看到变量正在出现null。一旦计数器被添加到ID中，就不需要再次追加它
解决方案
var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('poptemplate').cloneNode(true);
    newFields.id = newFields.id+counter;
    newFields.style.display = 'block';
    var insertHere = document.getElementById('catidtable');
    insertHere.parentNode.appendChild(newFields);
    // now update it
    var index, inputs, selects, container;
    container = document.getElementById(newFields.id);
    // Find its child `input` elements
    inputs = container.getElementsByTagName('input');
    selects = container.getElementsByTagName('select');
    for (index = 0; index < inputs.length; ++index) {
        // deal with inputs[index] element.
        inputs[index].name =  inputs[index].name + counter;
    }
    for (index = 0; index < selects.length; ++index) {
        // deal with select element
        selects[index].name = selects[index].name + counter;
        }
}
window.onload = moreFields;

var计数器=0；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'poptemplate'）.cloneNode（true）；
newFields.id=newFields.id+计数器；
newFields.style.display='block'；
var insertHere=document.getElementById（'catidtable'）；
insertHere.parentNode.appendChild（新字段）；
//现在更新它
var指数、输入、选择、容器；
container=document.getElementById（newFields.id）；
//查找其子“input”元素
inputs=container.getElementsByTagName（'input'）；
selects=container.getElementsByTagName（'select'）；
用于（索引=0；索引这是一个非常快速的演示，需要做一些工作，但确实简化了工作。它将克隆按原样放入dom中，然后根据表的ID对其进行更改。这可能效率不高，但一旦元素实际存在，就更容易处理它们。我运行了10次，以显示字段确实得到了更新。您能将代码放入回答，不仅仅是一个JSFIDLE链接？很高兴这让你开始了：）我第一次克隆的时候也遇到了这个问题。
var counter = 0;
function moreFields() {
    counter++;
    var index, inputs;
    var newFields = document.getElementById('poptemplate').cloneNode(true);
    newFields.id = newFields.id+counter;
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    var insertHere = document.getElementById('catidtable');
    insertHere.parentNode.appendChild(newFields);
    // now update it
    container = document.getElementById(newFields.id+counter);
    // Find its child `input` elements
    inputs = container.getElementsByTagName('input');
    selects = container.getElementByTagName('select');
    for (index = 0; index < inputs.length; ++index) {
        // deal with inputs[index] element.
        inputs[index].name =  inputs[index].name + counter;
        inputs[index].value =  inputs[index].name + counter;
    }
    for (index = 0; index < selects.length; ++index) {
        // deal with select element
        selects[index].name = selects[index].name + counter;
        }
 }
window.onload = moreFields;

var counter = 0;
function moreFields() {
while(counter<10){
counter++;
var index, inputs;
var newFields = document.getElementById('poptemplate').cloneNode(true);
newFields.id = 'clone'+counter;
newFields.style.display = 'block';
var newField = newFields.childNodes;
 var insertHere = document.getElementById('catidtable');
insertHere.parentNode.appendChild(newFields);
// now update it
container = document.getElementById('clone'+counter);
// Find its child `input` elements
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
    inputs[index].name =  inputs[index].name + counter;
    inputs[index].value =  inputs[index].name + counter;
}   
}
}
window.onload = moreFields;



<div id="poptemplate" style="display:none">
<table border="3" id="template">
<tr>
    <td>Field Name:</td>
    <td><input class="renameme" form="catform" type="text" name="fieldname_input" />    </td>
</tr>
<tr id="tr1">
    <td id="td1" colspan='2'><input type="button" value="Remove Field" onclick="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode);" /></td>
</tr>
</table>
</div>

<br>

<table id="catidtable">
</table>

var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('poptemplate').cloneNode(true);
    newFields.id = newFields.id+counter;
    newFields.style.display = 'block';
    var insertHere = document.getElementById('catidtable');
    insertHere.parentNode.appendChild(newFields);
    // now update it
    var index, inputs, selects, container;
    container = document.getElementById(newFields.id);
    // Find its child `input` elements
    inputs = container.getElementsByTagName('input');
    selects = container.getElementsByTagName('select');
    for (index = 0; index < inputs.length; ++index) {
        // deal with inputs[index] element.
        inputs[index].name =  inputs[index].name + counter;
    }
    for (index = 0; index < selects.length; ++index) {
        // deal with select element
        selects[index].name = selects[index].name + counter;
        }
}
window.onload = moreFields;