66 lines
2.7 KiB
JavaScript
66 lines
2.7 KiB
JavaScript
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const addFieldButton = document.getElementById("add-field"); // The plus button
|
|
const removeFieldButton = document.getElementById("remove-field"); // The minus button
|
|
const sectionOne = document.querySelector(".sec_one"); // The section to clone
|
|
|
|
// Function to clone the section
|
|
function cloneSection() {
|
|
const clonedSection = sectionOne.cloneNode(true); // Clones the entire section
|
|
const parent = sectionOne.parentNode; // Get the parent to append the clone
|
|
parent.appendChild(clonedSection); // Append the cloned section to the parent
|
|
}
|
|
|
|
// Function to remove the last cloned section
|
|
function removeSection() {
|
|
const sections = document.querySelectorAll(".sec_one"); // Get all sections
|
|
if (sections.length > 1) { // Ensure there's more than one section before removing
|
|
sections[sections.length - 1].remove(); // Remove the last section
|
|
}
|
|
}
|
|
|
|
// Add click event listeners to the buttons
|
|
addFieldButton.addEventListener("click", cloneSection);
|
|
removeFieldButton.addEventListener("click", removeSection);
|
|
});
|
|
|
|
|
|
//----------------------- cloned with default values----------------------------------------------//
|
|
|
|
// Get the section to clone
|
|
const sectionToClone = document.querySelector('.sec_one');
|
|
|
|
// Get the plus button to add a new section
|
|
const addButton = document.getElementById('add-field');
|
|
|
|
// Add event listener for adding a new section
|
|
addButton.addEventListener('click', () => {
|
|
// Clone the section without copying the form data
|
|
const newSection = sectionToClone.cloneNode(true);
|
|
|
|
// Clear all input fields in the cloned section
|
|
const inputs = newSection.querySelectorAll('input, select'); // Select all input fields and dropdowns
|
|
inputs.forEach(input => {
|
|
if (input.type === 'number') {
|
|
input.value = ''; // Reset input fields
|
|
} else if (input.tagName === 'SELECT') {
|
|
input.selectedIndex = 0; // Reset the dropdown to the first option
|
|
}
|
|
});
|
|
|
|
// Optionally, you can give the cloned section a unique class or id if needed
|
|
newSection.classList.remove('hidden'); // Make the section visible if it was hidden
|
|
|
|
// Append the cloned section to the container
|
|
const container = document.querySelector('.content');
|
|
container.appendChild(newSection);
|
|
});
|
|
|
|
// Remove section when the minus button is clicked
|
|
const removeButton = document.getElementById('remove-field');
|
|
removeButton.addEventListener('click', () => {
|
|
const sections = document.querySelectorAll('.sec_one');
|
|
if (sections.length > 1) { // Only remove if there's more than 1 section
|
|
sections[sections.length - 1].remove();
|
|
}
|
|
}); |