特定の行を複製するオプションを備えたテーブルにフォームがあります(したがって、ユーザーは必要に応じてフィールドを追加できます)。複製は正常に機能し、イベント データとハンドラーは正常に機能します。ただし、フォームが送信されると、複製されたフォーム フィールド データは投稿されません。以下は、正常に機能し、ID の重複の問題を解決するフィールドを複製するための私のコードです。複製されたフィールドが送信されない理由についての提案/ヘルプは、絶対に高く評価されます。
$('#btnAddNewField').click(function() {
var currLength = $('.cloneInput').length;
var newID = new Number(currLength + 1);
var clonedField = $('#field_id' + currLength).clone(true);
clonedField[0].setAttribute('id', 'field_id' + newID);
clonedField.find(':text').each(function() {
this.setAttribute('id', this.getAttribute('id') + newID);
this.setAttribute('name', this.getAttribute('name') + newID);
});
$('#field_id' + currLength).after(clonedField);
HTML:
<tr id="field_id_1">
<td>
<table>
<tr>
<td>Pick option</td>
<td>
<select name="choice_1" id="choice_1" parent="true">
<option value="null" selected="selected">Select</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</td>
</tr>
<tr>
<td>Pick next option</td>
<td>
<select name="next_choice_1" id="next_choice_1">
<option value="null" selected="selected">Select next</option>
</select>
</td>
</tr>
<tr>
<td>Image:</td>
<td><input type="file" name="image_1" id="image_1"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Add New" id="btnAddNewField" />
<input type="button" value="Remove" id="btnDelField" />
</td>
</tr>