Cannot get .data() variables to be gathered in my loop.

[bambinou1980]

Hello,

 

I am having a problem with a php loop in which I just cannot get the data product to be shown when I add a new form element(identical).

 

 

So imagine a form with an "add" and "delete" button, when I click "add" the dropdown button with "product name" is duplicated".

 

My goal is to have the user adding multiple of those drop down buttons which when select cause different prices to be loaded.

 

 

At the moment this works great for the first field but as soon as I add more than one, the price vat and product id are are loaded but based on the first dropdown each time.

 

 

There is something in my javascript code that is not telling the browser to notice the incremental changes when we add the new buttons, any idea please?

The product name and prices are changing right not but not the vat and product id.

 

 

Here is the php:

<!--Product 1-->                        <div id="element1" class="field">                            <div class="form-inline well">                                <label for="product1">Choose Product*</label>                                <div class="form-group" id="totals">                                    <select name="name[]" class="form-control products1">                                        <option>Select a Product</option>                                        <?php                                        $query_product1 = "SELECT * FROM products ORDER BY name desc";                                        $result_product1 = mysqli_query($connection, $query_product1) or die(mysqli_error());                                        while ($row_product1 = mysqli_fetch_array($result_product1)) {                                            $product1_id     = $row_product1['products_id'];                                            $product1_name   = $row_product1['name'];                                            $product1_price1 = $row_product1['price1'];                                            $product1_price2 = $row_product1['price2'];                                            $product1_price3 = $row_product1['price3'];                                            $product1_vat    = $row_product1['vat'];                                            ?>                                            <option value="<?php echo $product1_name; ?>" data-product1_id="<?php echo $product1_id; ?>" data-product1_vat="<?php echo $product1_vat; ?>" data-product1_price1="<?php echo $product1_price1; ?>" data-product1_price2="<?php                                                                if ($product1_price2 != 0.00) {                                                echo $product1_price2;                                            }                                            ?>" data-product1_price3="<?php                                                    if ($product1_price3 != 0.00) {                                                        echo $product1_price3;                                                    }                                                    ?>"><?php echo $product1_name; ?></option><?php } ?>                                    </select>                                    <input type="text" name="products_id[]" class="id1"/>                                    <input type="text" name="vat[]" class="vat1"/>                                     <select name="price[]" class="form-control prices1">                                         <option>Select Price</option>                                      </select>                                     <label for="product1_id">Qty</label>                                     <input name="quantity[]" type="number" class="form-control quantity1" maxlength="8" size="4" required>                                     <label for="total_id">Total Cost(€)</label>                                     <input name="total1" type="text" class="form-control total1" value="0" maxlength="8" size="4" required>                                     <button type="button" class="btn btn-warning">Calculate</button>                                </div>                            </div>                        </div>                        <!--Product 1-->
 

 

 

JS

 

    $(function product1() {
        $('.form-control.products1').change(function () {
            var selected = $('option:selected', this);
            var options = '<option>Select Price</option>';
            for (var i = 1; i <= 3; i++) {
                options += '<option>' + selected.data('product1_price' + i) + '</option>';
                
            }
            $('.form-control.prices1').html(options);
            $(this).closest('.form-group').find('.id1').val(selected.data('product1_id')); 
            $(this).closest('.form-group').find('.vat1').val(selected.data('product1_vat'));
        });
    });

 

 

Thanks and Happy Xmas!

[mac_gyver]

your code for the id/vat fields works for me with multiple sets of data. however, this part doesn't - $('.form-control.prices1').html(options);  that's setting all the select/option menus to the same set of prices, and resetting already selected prices, when you pick a product. you would need to use the following to get the price select/option menus to work independently and correctly - 

$(this).closest('.form-group').find('.form-control.prices1').html(options);

as to why your id/vat fields don't work properly -

imagine a form with an "add" and "delete" button, when I click "add" the dropdown button with "product name" is duplicated".

 

 

computer's don't have imaginations. programming is an exact science. exactly what, how, and where you are dynamically adding the markup in the DOM would be the most likely cause of the problem. there's a dozen different ways of doing this/types of mistakes you could have in your code that could be causing the problem. it would take having enough of your code that duplicates the problem in order to help.

[bambinou1980]

Yes this is exactly what I am experiencing "all the select/option menus to the same set of prices, and resetting already selected prices". I can work out the arrays in PHP and submit the data in a loop but with Javascript I am not understanding how to get the same effect.

Specifically this part:

 

$(this).closest('.form-group').find('.form-control.prices1').html(options);
 

 

How to get all the ids to increment in number(if this is the answer to the problem).

I would have preferred something like in PHP with prices[].

 

Kind of lost to be honest...

[mac_gyver]

if the problem was the price select/option menus, the change to the line of code that i gave will fix this.

 

as to id's in the DOM, you don't need any, especially if you are dynamically adding/removing repeat regions in the DOM.

 

if you mean the 1's you have as part of the class names, you don't need these either. they are serving no useful purpose as part of the class name.

 

if you have a current problem that you need help with, you will need to specifically state what the problem is and post the relevant code.

Edited December 25, 2015 by mac_gyver

[bambinou1980]

Hi Mac_gyver.

 

Ok let me explain further.

 

My problem is those 2 input fields not changing their values according to the loop data() values:

 

 

 

                                    <input type="text" name="products_id[]" class="id1"/>

                                    <input type="text" name="vat[]" class="vat1"/>

[mac_gyver]

since you didn't post your script that's dynamically adding the repeat regions, when i tested i used a method that caused the dynamically added regions to work. which is why someone has suggested twice in this thread that you need to post the relevant code that reproduces a problem.

 

unless you are calling your product1() function after you dynamically add a region, the current problem is mostly likely this - $('.form-control.products1').change(function () {.  this won't add the change event to any classes that are created after that bit of javascript runs.

 

change that line to the following to get the event to work for all the product select/option menus that exist in the document - 

$(document).on('change', '.form-control.products1' , function() {