現在、フォーム (選択ボックス) の一部を必要なだけ複製する Javascript 関数を使用して、エンド ユーザーに必要な数のフィールドを追加するオプションを提供しています。ハードコーディングされた HTML のみが私のフォームで POST 経由で送信され、残りは含まれていないことを除いて、すべて正常に動作しています。これはなぜですか、どうすれば修正できますか?
Javascript:
$(function()
{
var template = $('#inventoryItems .inventory:first').clone(),
inventoryCount = 0;
var addInventory = function()
{
inventoryCount++;
var inventory = template.clone().find(':input').each(function()
{
var newLabel = "invItem{" + inventoryCount + "]";
$(this).prev().attr('id', newLabel);
$(this).prev().attr('name', newLabel);
}).end()
.attr('id', 'inv' + inventoryCount)
.appendTo('#inventoryItems > fieldset');
};
$('.btnAddInventory').click(addInventory);
});
HTML
<fieldset style="width:62%; float:left; margin-left: 19%;">
<div id="inv1" class="inventory" style="margin-bottom:5px;">
<select name="invItem[0]" id="invItem[0]" style="width:92%;">
<?php
getInventoryOptions($dp_conn, "", $datacenter);
?>
</select>
<input class="btnRemoveInventory" type="button" style="background: url(images/icn_trash.png) no-repeat; cursor:pointer; border: none;">
</div>
</fieldset><div class="clear"></div>
<!-- Add Inventory Button -->
<div style="width:62%; margin:0; padding:0; float: right; margin-right: 19%">
<input class="btnAddInventory" type="button" value="Add Item" style="float: right;">
</div><div class="clear"></div>
</div>