How to retrieve info from a PHP-dynamically-generated-table with Js

Question

I'm making some sort of commerce project, where in the cart page I'm displaying the products that the user have selected.

here is the code:

<div class="container-table-cart pos-relative">
        <div class="wrap-table-shopping-cart bgwhite">
            <table class="table-shopping-cart">
                <tr class="table-head">
                    <th class="column-1"></th>
                    <th class="column-2">Prodotto</th>
                    <th class="column-3">Prezzo</th>
                    <th class="column-4 p-l-70">Quantità</th>
                    <th class="column-5">Totale</th>
                </tr>


                <?php
                $subtotal = (float)0;
                $priceConsegna = (float)1.50;
                $total = (float)0;
                if (!($showcart)) {
                    echo '<button onclick="logInRedirect()" class="flex-c-m size2 bg1 bo-rad-23 hov1 s-text1 trans-0-4">
                Accedi Per Ordinare
                </button>';

                } else {
                    //echo "goodbye";
                    $orderArray = array();
                    $orderArray = $arrayValues;
                    foreach ($orderArray as $value) {
                        $productQty = $value;
                        $productName = key($orderArray);
                        $productImage = getImageFromName($productName);
                        $productPrice = getPriceFromName($productName);

                        // Formatting Price
                        $totalPrice = $productQty * $productPrice;
                        //echo $totalPrice;
                        $subtotal += $totalPrice;
                        //echo $subtotal;


                        ?>

                        <tr id="" class="table-row">
                            <td class="column-1">
                                <div class="cart-img-product b-rad-4 o-f-hidden">
                                    <img src="pizze/<?php echo $productImage; ?>" alt="IMG-PRODUCT">
                                </div>
                            </td>
                            <td id="product-name" class="column-2"><?php echo $productName; ?> </td>
                            <td class="column-3"><?php echo formatPrice($productPrice); ?></td>
                            <td class="column-4">
                                <div class="flex-w bo5 of-hidden w-size17">
                                    <button onclick="manageQty('DwnProd')" class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                                        <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                                    </button>

                                    <input id="productQty" class="size8 m-text18 t-center num-product" type="number"
                                           name="num-product1" value="<?php echo $productQty; ?>">

                                    <button onclick="manageQty('UpProd')" class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                                        <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </td>
                            <td class="column-5">
                                <?php
                                echo formatPrice(number_format((float)$totalPrice, 2, '.', ''));
                                ?>
                            </td>
                        </tr>
                        <?php
                        next($orderArray);

                    }
                }

                ?>



            </table>
        </div>
    </div>

Right now I'm in the process of let the user modify the quantity of a single product, I'm using JS and here is the code:

    function manageQty(key){
    var number = $('#productQty');
    var name = $('#product-name')
    number.val().replace(/\n/g, '');
    number.val().replace(/\t/g, '');
    name.text().replace(/\n/g, '');
    name.text().replace(/\t/g, '');

    $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data:{
            key: key,
            name: name.text(),
            qty: number.val()
        }, success: function (response) {
            console.log(response);
            setCookie('phpcart', response,7);
            UpdatetotalSub();
        }

    })

}

The issue here is that when i press the btn-product Up or the btn-product-down, I always modify the first element of the table... Not the one that I'm trying to modify!

My understanding is that I'm doing something wrong on the js side of things.

Let me know if there is an "easy-fix" thanks

You are re-using HTML element IDs within your `foreach` loop. All elements must have unique IDs, especially when you are trying to reference/access elements by ID. — Patrick Q, Aug 16 '18 at 13:24
Possible duplicate of [How to pass variables and data from PHP to JavaScript?](https://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — AymDev, Aug 16 '18 at 13:26
@PatrickQ Yeah, but I don't know how to dynamically generate different ID, I mean the generation process is easy, the question is: how to get the data, I mean I don't know how many products my customers will buy, so I don't know how to access to multiple IDs.. — Manzo Filippo, Aug 16 '18 at 16:55

score 0 · Answer 1 · answered Aug 16 '18 at 13:38

Instead of using onClick attribute, I would use :

<button data-val="UpProd" id="myProdBtnn" class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                                    <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                                </button>

JS :

    $('#myProdBtnn').on('click',function(){

var key=$(this).attr('data-val');
var number = $(this).closest('input [id="productQty"]'); //change this
    var name = $(this).closest('td[id="product-name"]'); //change this
    number.val().replace(/\n/g, '');
    number.val().replace(/\t/g, '');
    name.text().replace(/\n/g, '');
    name.text().replace(/\t/g, '');

    $.ajax({
        url: 'ajax.php',
        method: 'POST',
        dataType: 'text',
        data:{
            key: key,
            name: name.text(),
            qty: number.val()
        }, success: function (response) {
            console.log(response);
            setCookie('phpcart', response,7);
            UpdatetotalSub();
        }

    })




})

How to retrieve info from a PHP-dynamically-generated-table with Js

1 Answers1