Can't call posted value from dynamic php and ajax form.

Question

Hey guys,

I built a page that automatically generates new divs when you click "add product." Each div contains a form with unique names and ids. I used this PHP and AJAX multi-level form tutorial to make my forms - http://www.codingcereal.com/2009/09/autopopulate-select-dropdown-box-using-jquery/

Issue is, I can't seem to call the values when submitting the form through PHP. Only reason I can think of is something to do with the forms being dynamically generated.

Any ideas? Let me know if you need more info.

        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

If you are generating a new form within each div, then when you submit the page, you won't be submitting each of the forms you create, but instead just the form the submit button belongs to.

If you don't put a new form in each div, then all the new fields will belong to the one you submit and you should be able to get their values.