there is a page with fields here code and screen

<table class="table-bordered table-striped table"> <tr> <th class="col-sm-2">Код товара</th> <th class="col-sm-5">Название</th> <th class="col-sm-2">Стомость, грн</th> <th class="col-sm-2">Количество, шт</th> </tr> <?php foreach ($itemsList as $item):?> <tr> <td><?php echo $item['code']; ?></td><!--code of product--> <td> <a href="/product/<?php echo $item['id'];?>"><?php echo $item['name'];?></a> </td><!-- link on product --> <td><?php echo $item['price'] . $item['currency'];?></td><!--price--> <td> <input class="form-control amountOfGoods" data-productId="<?php echo $item['id'] ?>" type="number" value="<?php echo $products[$item['id']]; ?>"> </td><!--amount--> <?php endforeach; ?> </tr> <tr style="border: 2px solid darkorange"> <td colspan="3"><h4 style="color: darkorange">Общая стоимость:</h4></td> <td> <?php echo $total; ?> </td> </tr> </table>

product change page

In short, in each field there is the amount of goods that can be changed. The idea is that when the field is changed, the id and quantity of the goods fall into the js file. Here is the js code

  $(document).ready(function () { $(".amountOfGoods").on('change', getInfo); }); function getInfo(){ let productId = $(this).attr('data-productId'); let productAmount = $(this).val(); let productInfo = {}; productInfo[productId] = productAmount; console.log(productInfo); }

As a result, you should get an associative array of the form

 {productId : productAmount}

which stores the final information about the ID of the goods and their quantity. The desired result is almost obtained, but the problem is that the values ​​are simply overwritten, so information about only one product is stored. The push method does not work here.

roughly speaking, you just need to get input values ​​with the quantity of goods and write to the array. Is it really impossible to do? Note that the number of inputs may be different, because everything is displayed from the database ...

  • Look at this javascript: the basics of working with localStorage - Mykola Veriga
  • if you add an object and use JSON.stringify, the key and value are simply rewritten - Alexander Tarasenko
  • localstorage did not solve the problem, because the values ​​are still just overwritten. - Alexander Tarasenko pm
  • When using localStorage.setItem (productId, productAmount); only the key is assigned and duplicated. No value is assigned - Alexander Tarasenko
  • And if you get the previous value, add a new one to it and write down what happened? - Mykola Veriga

1 answer 1

In general, I do not know how correct my decision is, but I found it. The error was that I was fixating on the attribute and onchange at that time, as it was just necessary to get the input values ​​with the quantity of goods. The code on pkhp remained unchanged.

The javaScript code has been altered so that when you click on the button to change the order, transfer the values ​​from the input with the data-productId attribute. Here is the code. Suddenly, someone is also useful.

 $(document).ready(function () { //при клике на кнопку срабатівает функция $("#edit").on('click', getInfo); }); function getInfo(){ let productsInfo = {}; $(".amountOfGoods").each(function() { productsInfo[$(this).attr("data-productId")] = $(this).val(); }); console.log(productsInfo); }

as a result, the output is exactly what was needed. array of type {9: "5", 10: "3"} where the first value is the id of the item and the second is the quantity of the item.