0

使用しているコードの中には、divの内容を必要な回数だけ複製するのに適したコードがあります。

元のコードは、各フォームフィールドの名前/IDの名前を変更します。したがって、最初のクローンの名前は「name1」、2番目のクローンは「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>

テーブルの子にたどり着く方法を知っている人はいますか？

ありがとう！

4

0 に答える 0