82 lines
3.3 KiB
JavaScript
82 lines
3.3 KiB
JavaScript
// Function to clone the entire additional-fields-container
|
|
function cloneAdditionalFieldsContainer() {
|
|
// Clone the original additional-fields-container
|
|
const originalContainer = document.querySelector('#additional-fields-container');
|
|
const clonedContainer = originalContainer.cloneNode(true);
|
|
|
|
// Add a unique class to the cloned container
|
|
clonedContainer.classList.add('cloned-container');
|
|
|
|
// Reset values in the cloned container if necessary
|
|
const inputs = clonedContainer.querySelectorAll("input, select");
|
|
inputs.forEach((input) => {
|
|
if (input.tagName.toLowerCase() === 'select') {
|
|
input.selectedIndex = 0; // Set default option for dropdowns
|
|
} else if (input.tagName.toLowerCase() === 'input') {
|
|
input.value = ""; // Clear input fields
|
|
}
|
|
});
|
|
|
|
// Add event listeners to the plus and minus images in the cloned container
|
|
initializeCloneControls(clonedContainer);
|
|
|
|
// Find the original additional-fields-container to insert the cloned container after it
|
|
if (originalContainer) {
|
|
// Insert the cloned container after the original .additional-fields-container
|
|
originalContainer.insertAdjacentElement('afterend', clonedContainer);
|
|
} else {
|
|
console.error('#additional-fields-container not found.');
|
|
}
|
|
}
|
|
|
|
|
|
// Function to remove the most recently added cloned container
|
|
function removeLastClonedContainer() {
|
|
const clonedContainers = document.querySelectorAll('#additional-fields-container.cloned-container');
|
|
if (clonedContainers.length > 0) {
|
|
clonedContainers[clonedContainers.length - 1].remove(); // Remove the last cloned container
|
|
} else {
|
|
alert('No cloned containers to remove.');
|
|
}
|
|
}
|
|
|
|
// Function to initialize plus and minus functionality for cloned containers
|
|
function initializeCloneControls(container) {
|
|
const addImage = container.querySelector('.plus');
|
|
const removeImage = container.querySelector('.minus');
|
|
|
|
if (addImage) {
|
|
addImage.addEventListener('click', function(event) {
|
|
event.preventDefault(); // Prevent default behavior
|
|
cloneAdditionalFieldsContainer(); // Clone another container
|
|
});
|
|
}
|
|
|
|
if (removeImage) {
|
|
removeImage.addEventListener('click', function(event) {
|
|
event.preventDefault(); // Prevent default behavior
|
|
removeLastClonedContainer(); // Remove the last cloned container
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize event listeners for the original plus and minus images
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Add click event listener to the plus image in the original container
|
|
const originalAddImage = document.querySelector('#add-field');
|
|
if (originalAddImage) {
|
|
originalAddImage.addEventListener('click', function(event) {
|
|
event.preventDefault(); // Prevent default behavior
|
|
cloneAdditionalFieldsContainer(); // Clone the container
|
|
});
|
|
}
|
|
|
|
// Add click event listener to the minus image in the original container
|
|
const originalRemoveImage = document.querySelector('#remove-field');
|
|
if (originalRemoveImage) {
|
|
originalRemoveImage.addEventListener('click', function(event) {
|
|
event.preventDefault(); // Prevent default behavior
|
|
removeLastClonedContainer(); // Remove the last cloned container
|
|
});
|
|
}
|
|
}); |