Не могу вызвать объявленное значение из динамической формы PHP и AJAX

Question

Я создал страницу, которая автоматически генерирует новые элементы div при нажатии «Добавить продукт».Каждый div содержит форму с уникальными именами и идентификаторами.Я использовал этот многоуровневый учебник по PHP и AJAX для создания своих форм - http://www.codingcereal.com/2009/09/autopopulate-select-dropdown-box-using-jquery/

Проблема в том, что я не могу вызвать значения при отправке формы через PHP.Единственная причина, по которой я могу придумать, связана с тем, что формы генерируются динамически.

Есть идеи?Дайте мне знать, если вам нужна дополнительная информация.

        var i = 0;

    $('a#add-product').click(function(event){
        i++;
        $('<div />').addClass('product').attr('id', 'product'+i)
            .append($('<h2><img src="<?php echo base_url();?>img/product.png" alt="" />Product '+i+'</h2>'))
            .append($('<div class="info-line"><label>Division</label><p><select id="selection-'+i+'"><option value="">- Select a Division -</option><option value="abrasives">Abrasives</option><option value="tapes">Bonding, Surface Protection &amp; Tapes</option><option value="packaging">Packaging</option></select></p></div>'))
            .append($('<div class="info-line"><label>Category</label><p><select id="selectionresult-'+i+'"></select><span id="result-'+i+'">&nbsp;</span></p></div>'))
            .append($('<div class="info-line"><label>Product</label><p><select id="selectionresult2-'+i+'"></select><span id="result2-'+i+'">&nbsp;</span></p></div>'))
            .append($('<a class="remove" href="#add-product" id="remove-product'+i+'"><img src="<?php echo base_url();?>img/remove-product.jpg" alt="" />Remove Product</a>'))
            .appendTo("#products");


            // START OF ADDITIONAL PRODUCT DROP DOWNS

                    $("#selectionresult-"+i).hide();
                    $("#selectionresult2-"+i).hide();

                    $("#selection-"+i).change( function() {
                        $("#selectionresult-"+i).hide();
                        $("#selectionresult2-"+i).hide();
                        $("#result-"+i).html('Retrieving ...');
                        $.ajax({
                            type: "POST",
                            data: "data=" + $(this).val(),
                            url: "<?php echo base_url();?>dropdown.php",
                            success: function(msg){
                                if (msg != ''){
                                    $("#selectionresult-"+i).html(msg).show();
                                    $("#result-"+i).html('');
                                }
                                else{
                                    $("#result-"+i).html('<em>No item result</em>');
                                }
                            }
                        });
                    });
                    $("#selectionresult-"+i).change( function() {
                        $("#selectionresult2-"+i).hide();
                        $("#result2-"+i).html('Retrieving ...');
                        $.ajax({
                            type: "POST",
                            data: "data=" + $(this).val(),
                            url: "<?php echo base_url();?>dropdown.php",
                            success: function(msg){
                                if (msg != ''){
                                    $("#selectionresult2-"+i).html(msg).show();
                                    $("#result2-"+i).html('');
                                }
                                else{
                                    $("#result2-"+i).html('<em>No item result</em>');
                                }
                            }
                        });
                    });

            // END OF ADDITIONAL PRODUCT DROP DOWNS 

            //START OF PRODUCT IMAGE PREVIEWS
                var productSelection = document.getElementById("selectionresult2-"+i);
                var productPreview = document.getElementById("product"+i+"image");

                //Accessories
                $('#selectionresult2-'+i).change(function () {
                    if (productSelection.value == "3M Disc Pad Face 1"){
                        productPreview.src = "<?php echo base_url();?>img/3m-disc-pad1.jpg";
                    }
                    else if (productSelection.value == "Belt 1"){
                        productPreview.src = "<?php echo base_url();?>img/belt1.jpg";
                    }
                    else {
                        productPreview.src = "<?php echo base_url();?>img/spacer.gif";
                    }
                });

                //Belts
                $('#selectionresult2-'+i).change(function () {
                    if (productSelection.value == "3M Disc Pad Face 1"){
                        productPreview.src = "<?php echo base_url();?>img/3m-disc-pad1.jpg";
                    }
                    else if (productSelection.value == "Belt 1"){
                        productPreview.src = "<?php echo base_url();?>img/belt1.jpg";
                    }
                    else {
                        productPreview.src = "<?php echo base_url();?>img/spacer.gif";
                    }
                });


    });

Answer 1

Если вы создаете новую форму внутри каждого элемента div, то при отправке страницы вы не будете отправлять каждую из созданных вами форм, а вместо этого будет принадлежать только форма, которой принадлежит кнопка отправки.

Если вы не добавите новую форму в каждый элемент div, все новые поля будут принадлежать тому, который вы отправляете, и вы сможете получить их значения.