Онлайн калькулятор стоимости с динамически создаваемой таблицей

175

19 апреля 2022, 21:50

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

<tr>
  <td><input type="number" value="1" name="str[]" disabled></td>
  <td><input type="text" class="form-control" id="name" name="name[]" required></td>
  <td><input type="number" class="form-control num" id="num" name="num[]" value="" required></td>
  <td><input type="number" class="form-control price" id="price" name="price[]" value="" required></td>
  <td><input type="text" class="form-control sum" id="sum" name="sum[]" value="" disabled></td>

[+]

JS скрипт который добавляет строку с полями при нажатии на +

var countOfFields = 1; // Текущее число полей
var curFieldNameId = 1; // Уникальное значение для атрибута name
var maxFieldLimit = 25; // Максимальное число возможных полей
function deleteField(a) {
 if (countOfFields > 1)
 {
   var contDiv = a.parentNode;
   contDiv.parentNode.removeChild(contDiv);
   countOfFields--;
}
return false;
}
function addField() {
if (countOfFields >= maxFieldLimit) {
alert("Число полей достигло своего максимума = " + maxFieldLimit);
return false;
}
countOfFields++;
curFieldNameId++;
var div = document.createElement("tr");
div.innerHTML = "<td><input name=\"str[" + curFieldNameId + "]\" type=\"number\" value=\"" +            curFieldNameId + "\" style=\"width: 50px;\" disabled>&nbsp;&nbsp;</td><td><input type=\"text\" class=\"form-control\" id=\"name\" name=\"name[" + curFieldNameId + "]\" required></td><td><input type=\"number\" class=\"form-control num\" id=\"num\" name=\"num[" + curFieldNameId + "]\" required></td><td><input type=\"number\" class=\"form-control price\" id=\"price\" name=\"price[" + curFieldNameId + "]\" required></td><td><input type=\"number\" class=\"form-control sum\" id=\"sum\" name=\"sum[" + curFieldNameId + "]\" disabled></td><td><a onclick=\"return addField()\" href=\"#\"><font color=\"green\">[+]</font></a></td>";
document.getElementById("parentId").appendChild(div);
return false;
}

И JS который должен считать стоимость товара взависимости от колличества

$(document).ready( function(){
    $('#score').on('submit', function(event){
      event.preventDefault();
      var num,
          price,
          sum;
      num = $('.num').val();
      price = $('.price').val();
      sum = parseInt(num) * parseInt(price);
      $('.sum').val(sum);
    });

Но в итоге получается так что если строка с полями только одна то сумма считается, но если добавлять еще несколько строк то в каждой строке в поле sum вписывается сумма только первой строки. Как сделать так чтобы стоимость в каждой добавленной строке считалась и и далее считалась общаяя сумма в поле total, тоесть общая сумма всех добавленных полей sum

Для каждой строки должно быть свое значение суммы

Answer 1

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

$('#score').on('submit', function(event) {
  event.preventDefault();
  
  var sum = 0;
  var $sum = $(".sum"), $num = $(".num"), $price = $(".price");
  
  $num.each(function(i) {
    var result = parseInt($num.eq(i).val()) * parseInt($price.eq(i).val());
    $sum.eq(i).val(result);
  });
});

При этом parseInt не нужен, если в полях нет ничего лишнего, кроме чисел. Операция умножения и так превратит полученные строки в числа.

P.s. вместо повсеместного экранирования \", можно использовать 'одиночные кавычки "..." снаружи'