使用javascript克隆-重命名表中表单元素的ID_Javascript_Clone

使用javascript克隆-重命名表中表单元素的ID

javascript

使用javascript克隆-重命名表中表单元素的ID,javascript,clone,Javascript,Clone,我使用了一些代码，可以根据需要多次克隆div的内容原始代码将重命名每个表单字段的名称/id。所以第一个克隆的名字是“name1”第二个克隆的名字是“name2”等等问题是当我出于设计目的将表单字段放在div或表中时代码不再重命名表单字段，因为它似乎引用了顶层元素，即表或div（取决于我使用的是哪一个）下面是代码的精简版本，其中包含本示例所需的所有内容（可以复制到编辑器中，并按原样工作。您将看到字段id未被重命名）： www.jsbin.com/oyavez/1/edit <s

我使用了一些代码，可以根据需要多次克隆div的内容

原始代码将重命名每个表单字段的名称/id。所以第一个克隆的名字是“name1”第二个克隆的名字是“name2”等等

问题是当我出于设计目的将表单字段放在div或表中时

代码不再重命名表单字段，因为它似乎引用了顶层元素，即表或div（取决于我使用的是哪一个）

下面是代码的精简版本，其中包含本示例所需的所有内容（可以复制到编辑器中，并按原样工作。您将看到字段id未被重命名）：

www.jsbin.com/oyavez/1/edit

   <script type="text/javascript">
var formCounter = 0;

function init() {
    document.getElementById('moreFields').onclick = moreFields;
    moreFields();
}

function moreFields() {
      formCounter++;
        var newFields = document.getElementById('readroot').cloneNode(true);
        newFields.id = '';
    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 + formCounter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;
</script>

<title>Add Orders IO TOC</title>
</head>
<body>

<!--  Template -->

<div id="readroot" style="display: none">


<table>
<tr><td colspan="2"><h3>Order <script>document.write(formCounter);</script></h2></td></tr>
<tr><td>Order ID: </td><td><input type="text" id="OrderID  name="OrderID[]" ></input></td>
<td>Order Name: </td><td><input type="text" id="OrderName" name="OrderName[]" ></input></td>

</table>
<br /><br /><input type="button" value="Remove Above Order" style="width:200px;"  onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

<!-- ROW -->

</div>

<!--  END Template -->

<!-- Start of form -->
<form method="get" action="form.php">

<table>
<tr><td align="center" colspan="2"><h2>Contract</h2></td></tr>
<!-- Static part of the form not to be cloned -->

 <tr><td>Contract: </td><td><input type="text" id="Contract" name="Contract" ></input></td>
 <td>Signed Date: </td><td><input type="text" id="datepicker0" name="SignedDate" ></input></td>

 <tr><td align="center" colspan="2"><h2>Orders</h2></td></tr>

</table>

<!-- ROW -->

<!-- Cloned parts of the form appear here -->


<span id="writeroot"></span>
<table>
<tr><td align="center" >    <input type="button" style="width:200px;" value="Add another order     below" onclick="moreFields()" /></td>
<td align="center" ><input type="submit" value="Submit IO and all Orders" style="width:200px;"  ></td></tr>

</table>

</form>


var-formCounter=0；
函数init（）{
document.getElementById（'moreFields'）。onclick=moreFields；
moreFields（）；
}
函数moreFields（）{
formCounter++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（var i=0；i
首先，您的HTML标记无效（缺少div开始标记，输入标记没有单独的结束标记）。在jsbin.com或jsfiddle上设置一个工作示例，以更快地获得帮助。我刚刚编辑了代码，在发布问题时似乎丢失了一些代码。它是否仍然无效，如果是，有什么问题吗？任何人-在问问题时有没有更简单的方法粘贴代码？例如将它放在标记中，以指示它是代码，而不是每个问题有四个空格行？：）粘贴代码，突出显示它，然后按上面的“代码”按钮。它将自动缩进4行。还要记住，您的代码块上方也需要一个空行。当您将代码部分粘贴到编辑器中时，顶部有一个{}符号。只需选择代码部分并单击该图标。它将缩进您的代码。。