Я пытаюсь получить каждое значение из поля оплаты в соответствии с типом оплаты. Когда и цена, и оплата имеют значение, поле ввода оплаты будет заполнено платой - цена, а поле общей суммы будет заполнено при выборе типа оплаты.
Во второй ситуации, когда у меня есть более одной формы и один и тот же тип платежа (например, НАЛИЧНЫМИ), он автоматически суммирует оба платежа и отображает ОБЩУЮ СУММУ, ЗАДАННУЮ НАЛИЧНЫМИ.
И это то, что я сделал
// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");
btn.addEventListener("click", (e) => {
e.preventDefault();
const clone = formClone.cloneNode(true);
clone.querySelectorAll("input").forEach((e) => {
e.value = "";
});
parentForm.appendChild(clone);
const deleteForm = document.createElement("button");
deleteForm.innerText = "X";
deleteForm.classList.add("btn", "btn-danger", "btn-sm");
clone.appendChild(deleteForm);
deleteForm.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentElement.remove();
});
});
const payment = document.querySelector(".type-payment");
const price = document.querySelector(".input-price");
const pay = document.querySelector(".input-pay");
const allInputSum = document.querySelectorAll(".sum");
const inputTotal = document.querySelector(".input-total");
let result;
let totalValue;
function handleSelectChange(event) {
result = payment.value;
totalValue = pay.value - price.value;
inputTotal.value = totalValue.toLocaleString();
let inputSum = Array.from(allInputSum).filter((e) => {
if (e.id == result) {
e.value = inputTotal.value;
}
});
}
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous">
<button id = "add-button" class = "btn btn-primary mb-3">Add Form</button>
<div class = "wrappers">
<div class = "row clone mb-2">
<div class = "col px-0">
<div class = "input-group mb-2">
<input
type = "number"
class = "form-control rounded-0 input-price"
placeholder = "Price"
onchange = "handleSelectChange(event)"
/>
</div>
</div>
<div class = "col px-0">
<div class = "input-group mb-2">
<input
type = "number"
class = "form-control rounded-0 input-pay"
placeholder = "Pay"
onchange = "handleSelectChange(event)"
/>
</div>
</div>
<div class = "col-auto px-0">
<div class = "input-group mb-2">
<select
class = "form-control rounded-0 type-payment"
role = "button"
onchange = "handleSelectChange(event)"
>
<option value = "CASH">CASH</option>
<option value = "DEBIT">DEBIT</option>
<option value = "CASHLESS">CASHLESS</option>
</select>
</div>
</div>
<div class = "col px-0">
<div class = "input-group mb-2">
<input
onchange = "handleSelectChange(event)"
value = "0.00"
type = "text"
class = "form-control rounded-0 input-total"
disabled
/>
</div>
</div>
</div>
</div>
<div class = "pt-4">
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL CASH"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "CASH"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL DEBIT"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "DEBIT"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL CASHLESS"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "CASHLESS"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin = "anonymous"></script>
Ты на правильном пути.
Проблема в том, что после клонирования узла в JavaScript его прослушиватели событий не копируются из исходного элемента.
В вашем случае все поля ввода, которым вы назначили событие onChange
handleSelectChange
, потеряли эти прослушиватели событий в клонированном узле.
Все, что вам нужно сделать, это переназначить это событие onChange
элементу клонированных узлов.
// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");
btn.addEventListener("click", (e) => {
e.preventDefault();
const clone = formClone.cloneNode(true);
clone.querySelectorAll("input").forEach((e) => {
e.value = "";
});
clone.querySelector(".type-payment").addEventListener('change', handleSelectChange);
clone.querySelector(".input-price").addEventListener('change', handleSelectChange);
clone.querySelector(".input-pay").addEventListener('change', handleSelectChange);
parentForm.appendChild(clone);
const deleteForm = document.createElement("button");
deleteForm.innerText = "X";
deleteForm.classList.add("btn", "btn-danger", "btn-sm");
clone.appendChild(deleteForm);
deleteForm.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentElement.remove();
});
});
const allInputSum = document.querySelectorAll(".sum");
function handleSelectChange(event) {
const forms = document.querySelectorAll(".clone");
const totals = {'CASHLESS': 0, 'DEBIT': 0, 'CASH': 0};
forms.forEach(form => {
const payment = form.querySelector(".type-payment");
const price = form.querySelector(".input-price");
const pay = form.querySelector(".input-pay");
const inputTotal = form.querySelector(".input-total");
let totalValue;
totalValue = pay.value - price.value;
inputTotal.value = totalValue.toLocaleString();
totals[payment.value] += totalValue;
})
Array.from(allInputSum).filter((e) => {
console.info([e.value, e.id, totals])
e.value = totals[e.id] || 0;
});
}
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous">
<button id = "add-button" class = "btn btn-primary mb-3">Add Form</button>
<div class = "wrappers">
<div class = "row clone mb-2">
<div class = "col px-0">
<div class = "input-group mb-2">
<input
type = "number"
class = "form-control rounded-0 input-price"
placeholder = "Price"
onchange = "handleSelectChange(event)"
/>
</div>
</div>
<div class = "col px-0">
<div class = "input-group mb-2">
<input
type = "number"
class = "form-control rounded-0 input-pay"
placeholder = "Pay"
onchange = "handleSelectChange(event)"
/>
</div>
</div>
<div class = "col-auto px-0">
<div class = "input-group mb-2">
<select
class = "form-control rounded-0 type-payment"
role = "button"
onchange = "handleSelectChange(event)"
>
<option value = "CASH">CASH</option>
<option value = "DEBIT">DEBIT</option>
<option value = "CASHLESS">CASHLESS</option>
</select>
</div>
</div>
<div class = "col px-0">
<div class = "input-group mb-2">
<input
onchange = "handleSelectChange(event)"
value = "0.00"
type = "text"
class = "form-control rounded-0 input-total"
disabled
/>
</div>
</div>
</div>
</div>
<div class = "pt-4">
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL CASH"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "CASH"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL DEBIT"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "DEBIT"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
<div class = "row">
<div class = "col-md-8 pr-0">
<input
class = "form-control total rounded-0"
disabled
placeholder = "TOTAL CASHLESS"
/>
</div>
<div class = "col-md-4 pl-0">
<input
id = "CASHLESS"
class = "form-control rounded-0 sum"
disabled
placeholder = "0.00"
/>
</div>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin = "anonymous"></script>
Попробуйте этот код, я внес необходимые изменения, которые вам нужны.
Как это сделать? @DipoAhmed
@Tom-Cat Попробуйте измененный код.
Спасибо, это работает @DipoAhmed. Можете ли вы объяснить свой код?
@Tom-Cat В вашем коде было несколько проблем. 1. Вы не назначили прослушиватели событий на скопированном узле. 2. Вы не рассчитали каждое поле ввода в форме. что я сделал, так это выбрал каждую строку из формы и сделал цикл for, вычислил сумму для каждой строки и установил ее как общую. Я также сохраняю эту сумму в объекте, где значение вашего платежа является ключевым. Все, что я делаю, это запускаю эту операцию для каждого события onChange полей ввода.
АА, вижу. Я попробую разобраться. Спасибо @DipoAhmed
And this is what I've done
- в чем проблема с этим кодом?