Есть форма которая по кнопке дублираеться через JS (cloneNode) сколько нужно раз
так же есть возможность удаления необходимой части формы при этом нужно как то проставлять индекс name полей инпутов чтобы потом можно было выполнить отравку на почту через phpMailer
пример - handlingUnits[0][PackageType]
Подскажите пожалуйста самое подходящее решение
Ссылка на страницу
//----- Units ---------------------------------------
const addBtn = document.querySelector('.packing-form__add-btn'),
unitsContainer = document.querySelector('.packing-form-units')
addBtn.onclick = addNewUnitForm
function addNewUnitForm() {
const unit = document.querySelectorAll(".packing-form-unit")[0],
cloneUnit = unit.cloneNode(true)
unitsContainer.appendChild(cloneUnit)
const unitDeleteBtns = document.querySelectorAll('.form-unit__delete'),
allUnits = document.querySelectorAll(".packing-form-unit")
allUnits.forEach(unit => {
const unitItems = unit.querySelectorAll('.unit-form-item'),
formUnit = document.querySelectorAll('.packing-form-unit')
for (let i = 0; i < formUnit.length; i++) {
let n = i + 1
unitItems.forEach(unit => {
let nameAttr = unit.getAttribute('name')
})
}
})
function countingUnits() {
const numEl = document.querySelectorAll('.packing-form-unit__num')
for (let i = 0; i < numEl.length; i++) {
let n = i + 1
numEl[i].textContent = n
}
}
function showHideDeleteBtn(btn) {
const numEl = document.querySelectorAll('.packing-form-unit__num')
if (numEl.length >= 2) {
btn.classList.add('d-block')
} else {
btn.classList.remove('d-block')
}
}
unitDeleteBtns.forEach(deleteBtn => {
showHideDeleteBtn(deleteBtn)
deleteBtn.addEventListener('click', function (e) {
this.closest('.packing-form-unit').remove()
countingUnits()
buttonChangeUnits()
unitDeleteBtns.forEach(deleteBtn => {
showHideDeleteBtn(deleteBtn)
})
})
})
countingUnits()
buttonChangeUnits()
}
Средний
