Javascript-форум - Динамически создаваемая форма с подсчетом суммы

Цитата:

Сообщение от l30

в php попадают значения только из первой строки, которая по дефолту появляется

Чего-то не то. Давайте так - данные уж точно будут писаться в базу, и такой переданный массив выгоднее писать в нее в пакетном режиме (многострочная вставка). Ограничения в таком режиме накладываются не на количество строк, а на их общий размер, и определяется sql-параметром max_allowed_packet. А учитывая то, что в базе каждая запись должна иметь свой уникальный идентификатор и формирование такового, это есть сам механизм SQL, а никак не нумерация клиентом, и записи в базу не только добавляются, но могут и удаляться из нее, наличие в ваших данных поля name="str[]", это нечто непонятное и никчемное.

То же самое можно сказать и о поле name="sum[]" - это какую же сумму нужно рассчитывать на клиенте, отправлять на север для сохранения в базе, если такие данные как количество и цена никогда не являлись величинами постоянными?

Я выбрасываю эти поля из данных, и все что нужно делать на клиенте, это:
- клонировать родительский узел
- найти в клоне поля и очистить их значения
- у кнопки удаления удалить класс remove, ибо этому классу по умолчанию указано быть невидимым, так как нельзя удалять из формы поля, если их набор в ней единственный
- вставить клон в родительский узел (в примере, это добавленный id="parent-box"), ему же делегируется и обработка кнопок удаления/добавления полей.

Как видите, если выполнить, отправив форму (добавлено для примера), то все добавленные наборы отправляются и ничего не пропадает.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.remove {
    display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#parent-box').on('click', 'a', function(e) {
    e.preventDefault();
    
    var src = $(this), dst = src.closest('.row');
    
    if(src.hasClass('add')) {
        dst.clone()
           .find('input').val('')
           .end()
           .find('a').removeClass('remove')
           .end()
           .appendTo(e.delegateTarget)
    } else dst.remove();

});

$('form').submit(function(e) {
    e.preventDefault();
    alert(JSON.stringify($(this).serializeArray(), null, 4))
})    
});
</script>
</head>
<body>
<form>
<div id="parent-box">

  <div class="row">
    <div data-container="set">
    <div class="row p-2" data-item="set">
     <div class="col-4"> <input type="text"  name="name[]" value=""></div>
      <div class="col-1"> <input type="text"  name="num[]" value=""></div>
      <div class="col-2"> <input type="text"  name="price[]" value=""></div>
     
     <div class="col-2"> <a type="button" data-action="remove" class="remove">[-]</a>
      <a type="button" data-action="add" class="add">[+]</a>
     </div>
    </div>
  </div>
  </div>


</div>

<button>GO</button>
</form>
</body>
</html>

Но можно и "нумерацией" на клиенте заняться, но с совсем иной целью. Если на сервере при добавлении в базу используют ненумерованные метки, то пришедший массив данных:

Array
(
    [name] => Array
        (
            [0] => value
            [1] => value
            .....
        )

    [num] => Array
        (
            [0] => value
            [1] => value
            .....
        )

    [price] => Array
        (
            [0] => value
            [1] => value
            .....
        )
)

несложно преобразовать в массив для пакетной записи, как

$post = array_map(null, $_POST['name'], $_POST['num'], $_POST['price']);

получив массив:

Array
(
    [0] => Array
        (
            [0] => value
            [1] => value
            [2] => value
        )

    [1] => Array
        (
            [0] => value
            [1] => value
            [2] => value
        )
        .....
)

Но данные подлежат обязательной фильтрации, и производить ее с таким набором хоть и можно, но неудобно, а если работать с именованными метками (PDO), то такой набор не годится. Но можно именовать поля так (это у полей по умолчанию):

name="data[0][name]"
name="data[0][num]"
name="data[0][price]"

код добавления полей заменить на:

if(src.hasClass('add')) {
        var i = Date.now(); 
        dst.clone()
           .find('input').each(function() {
                this.value = '';
                this.name = this.name.replace(/\d+/, i) 
           })
           .end()
           .find('a').removeClass('remove')
           .end()
           .appendTo(e.delegateTarget)
    } else dst.remove();

то на сервере массив данных уже будет вот таким:

Array
(
    [data] => Array
        (
            [0] => Array
                (
                    [name] => value
                    [num] => value
                    [price] => value
                )

            [1601149425635] => Array
                (
                    [name] => value
                    [num] => value
                    [price] => value
                )

            [1601149432956] => Array
                (
                    [name] => value
                    [num] => value
                    [price] => value
                )
             .....
        )
)

получаем $_POST['data'] для дальнейшей работы с данными, и эта структура выгоднее. Здесь метка времени используется как индекс вложенных массивов, что проще чем вычислять какой-то номер, а на сервере он не имеет никакого практического значения.