Есть динамически создаваемые поля ввода (input) для каждого товара:
наименование | количество | дней | сумма (вычисляется автоматически)
Для того, чтобы вывести в табличном порядке все позиции, я использую метод .serializeArray()
. И потом его делю на подмассивы, чтобы все позиции не одной строкой отображались.
$(document).ready(function() {
// этот кусок работает. Прикрепил для демо
$(".dobav").on('click', function() {
// ПЕРВОНАЧАЛЬНО КОЛИЧЕСТВО ДНЕЙ
var InpDaysOne = $(".InpDaysOne").val();
//получаем выбранный пункт селекта
var nameOption = $('.mysel option:selected').text();
//получаем цену выбранного пункт селекта
var priceOption = $('.mysel option:selected').attr('data-price');
// добавляем на страницу блок с заказом
$('.contCals').append('<div class="dispNone"><div class="dopInp"><p class="ydalit"></p>' +
'<p><label>Название услуги<br><input name="nameOpt" class="nameOboryd" pleceholder="" value="' + nameOption + ' " readonly /></label></p><p><label>Единиц<br><input name="edOpt" class="InpNum" type="number" min="1" value="1" pleceholder="" /></label></p>' +
'<p><label>Дней<br><input name="days" type="number" class="InpDays" min="1" value="' + InpDaysOne + '" pleceholder="" /></label></p><p><label>Сумма<br><input name="sumOpt" pleceholder="" class="resoltSum" readonly /></label></p><input class="priceOption" type="hidden" value="' + priceOption + '"/></div></div>');
//первоначальный расчет суммы чтобы не было пустоты сначало
$('.InpNum, .InpDays').change();
});
// Кусок ниже не отображает значение. Т.е. не записывает результат в таблицу.
// undefined Выходит
$(".info").on('click', function() {
// создаю пустой массив
var test = [];
//собираю все инпуты, кроме скрытого. Он для расчета итоговой суммы
test = $('.dopInp').find(':input:not(.priceOption)').serializeArray();
var size = 4; //размер подмассива
var subarray = []; //массив в который будет выведен результат.
//цикл делящий массив по 4 значения
// наименование - количество - дней - сумма
for (let i = 0; i < Math.ceil(test.length / size); i++) {
subarray[i] = test.slice((i * size), (i * size) + size);
}
// запись в строку таблицы позиций
var tbody = document.querySelector('tbody');
for (var i = 0; i < subarray.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML =
'<td>' + subarray[i].nameOpt + '</td>' +
'<td>' + subarray[i].edOpt + '</td>' +
'<td>' + subarray[i].days + '</td>' +
'<td>' + subarray[i].sumOpt + '</td>';
tbody.appendChild(tr);
}
//alert(subarray);
//конец функции клика по кнопке
});
//удаляем строчку заказа
$("div").on('click', '.ydalit', function() {
$(this).parent().remove();
});
// КАЛЬКУЛЯЦИЯ ПОЛЕЙ
$(document).on('change keyup', '.InpNum, .InpDays', function() {
// получаем значения изменяемых полей
var InpNum = Number($(this).parents(".dopInp").find(".InpNum").val());
var InpDays = Number($(this).parents(".dopInp").find(".InpDays").val());
//помещаем в переменную цену из скрытого инпута
var price = Number($(this).parents(".dopInp").find(".priceOption").val());
if (+InpDays == 1) {
var price = price * 1;
}
if (+InpDays == 2) {
var price = price + (price * 0.5);
}
if (InpDays == 3) {
var price = price + (price * 0.5) + (price * 0.3);
}
if (InpDays >= 4 && InpDays <= 10) {
var price = price + (price * 0.5) + (price * 0.3) + ((price * 0.15) * (InpDays - 3));
}
if (InpDays > 10) {
var price = price + (price * 0.5) + (price * 0.3) + ((price * 0.15) * 7) + ((price * 0.10) * (InpDays - 10));
}
// Поле сумма
$(this).parents(".dopInp").find(".resoltSum").val(+InpNum * +price + " ₽");
});
});
.dd {
width: 150px;
height: 150px;
background: blue;
}
.dopInp p {
display: inline-block;
color: green;
}
.dopInp input,
select,
.InpDaysOne {
padding: 10px 25px;
border: 1px solid #252525;
outline: none;
margin-right: 15px;
}
.dopInp input[type=number] {
padding: 10px 25px;
width: 50px;
}
.dobav,
.info {
padding: 10px 25px;
border: 0px solid #252525;
outline: none;
background: #56ef8c;
cursor: pointer;
}
.dispNone {
display: ;
}
.ydalit {
cursor: pointer;
margin: 10px;
color: black;
width: 25px;
height: 25px;
background: red;
/*background: url(1200px-Multiplica.png) no-repeat center;*/
background-size: contain;
vertical-align: middle;
opacity: 0.3;
}
.ydalit:hover {
opacity: 0.8;
}
.nameOboryd {
width: 250px;
}
table {
border: 0px solid gray;
width: 80%;
}
td,
tr {
border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><label>Количество дней <br><input pleceholder="" type="number" min="1" value="1" class="InpDaysOne" /></label></p>
<select class="mysel chosen-select">
<optgroup label="Группа 2">
<option data-price="7000">Товар 1</option>
<option data-price="2500">Товар 2</option>
<option data-price="2500">Товар 3</option>
<optgroup label="Группа 2">
<option data-price="1000">Товар 4</option>
<optgroup label="Группа 3">
<option data-price="500">Товар 5</option>
<option data-price="5000">Товар 6</option>
<option data-price="2500">Товар 7</option>
</select>
<button class="dobav">добавить</button>
<div class="contCals"></div>
<br><br><br>
<div class="tableResolt">
<table>
<thead>
<tr>
<th>Оборудование</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button class="info">Рассчитать</button>
Проблема в том, что значение перебираемого объекта не выводится: получается либо undefined
, либо [object object]
.