سؤال

I currently have a Javascript function that clones part of my form (select box) as many times as needed, giving the end user the option of adding as many fields as required. Everything is working fine except that only the hard-coded HTML is sent via POST with my form, the rest are not included. Why is this and how can it be fixed?

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>
هل كانت مفيدة؟

المحلول

I guess this:

var newLabel = "invItem{" + inventoryCount + "]";
//---------------------^

should be

var newLabel = "invItem[" + inventoryCount + "]";

نصائح أخرى

When you are updating your id and name for your inputs you are replacing it with invItem{x] instead of invItem[x].

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top