295 lines
12 KiB
JavaScript
295 lines
12 KiB
JavaScript
let cloneCounter = 0; // Global counter to track cloned sections
|
|
|
|
function addDropdownBehavior(section) {
|
|
const accessDropdown = section.querySelector('[id^="access"]');
|
|
const portInputDiv = section.querySelector('[id^="portInputDiv"]');
|
|
const dynamicDropdownDiv = section.querySelector('[id^="dynamicDropdownDiv"]');
|
|
const dynamicDropdown = section.querySelector('[id^="dynamicDropdown"]');
|
|
|
|
// Event listener function for dropdown change
|
|
function handleDropdownChange() {
|
|
const selectedValue = this.value;
|
|
|
|
// Show or hide input fields based on selection
|
|
if (selectedValue === 'Port') {
|
|
portInputDiv.classList.remove('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
} else if (selectedValue !== '') {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.remove('hidden');
|
|
|
|
let options = '';
|
|
if (selectedValue === 'Connectiontype') {
|
|
options = `<option value="wifi">WiFi</option><option value="ethernet">Ethernet</option>`;
|
|
} else if (selectedValue === 'Subtype') {
|
|
options = `<option value="fiber">Fiber</option><option value="dsl">DSL</option>`;
|
|
} else if (selectedValue === 'Switch') {
|
|
options = `<option value="switchA">Switch A</option><option value="switchB">Switch B</option>`;
|
|
}
|
|
|
|
// Ensure a full <select> element is rendered inside the dynamic dropdown div
|
|
dynamicDropdownDiv.innerHTML = `<select id="${dynamicDropdown.id}" name="${dynamicDropdown.name}">${options}</select>`;
|
|
} else {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Remove any existing event listener first
|
|
accessDropdown.removeEventListener('change', handleDropdownChange);
|
|
accessDropdown.addEventListener('change', handleDropdownChange);
|
|
}
|
|
|
|
// Function to add event listeners for plus and minus icons in the dynamic section
|
|
function addDynamicSectionListeners(section) {
|
|
const plusIcon = section.querySelector('.plus');
|
|
const minusIcon = section.querySelector('.minus');
|
|
|
|
// Plus functionality: clone the dynamic section
|
|
plusIcon.addEventListener('click', function () {
|
|
const newDynamicClone = section.cloneNode(true); // Clone the dynamic section
|
|
cloneCounter++; // Increment the global counter
|
|
|
|
// Reset inputs and dropdowns in the cloned section
|
|
resetInputs(newDynamicClone, cloneCounter);
|
|
|
|
section.parentNode.appendChild(newDynamicClone);
|
|
addDynamicSectionListeners(newDynamicClone); // Add listeners for the new section
|
|
addDropdownBehavior(newDynamicClone); // Initialize dropdown behavior for the new section
|
|
});
|
|
|
|
// Minus functionality: remove the dynamic section
|
|
minusIcon.addEventListener('click', function () {
|
|
if (section.parentNode.childElementCount > 1) { // Ensure at least one section remains
|
|
section.remove();
|
|
}
|
|
});
|
|
|
|
addDropdownBehavior(section); // Initialize dropdown behavior for this section
|
|
}
|
|
|
|
// Function to reset inputs, assign unique ids/names
|
|
function resetInputs(section, counter) {
|
|
const inputs = section.querySelectorAll('input, select');
|
|
inputs.forEach(input => {
|
|
if (input.type !== 'checkbox') {
|
|
input.value = ''; // Clear input fields
|
|
} else {
|
|
input.checked = false; // Uncheck checkboxes
|
|
}
|
|
|
|
// Assign unique names and IDs to cloned inputs
|
|
const baseName = input.name.replace(/_\d+$/, ''); // Strip off any previous clone counter
|
|
input.name = `${baseName}_${counter}`; // Add clone counter to name
|
|
|
|
const baseId = input.id.replace(/_\d+$/, ''); // Strip off any previous clone counter
|
|
input.id = `${baseId}_${counter}`; // Add clone counter to ID
|
|
});
|
|
|
|
section.querySelector('[id^="access"]').selectedIndex = 0; // Reset dropdown to default
|
|
|
|
// Hide input fields for the cloned section by default
|
|
const portInputDiv = section.querySelector('[id^="portInputDiv"]');
|
|
const dynamicDropdownDiv = section.querySelector('[id^="dynamicDropdownDiv"]');
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
}
|
|
|
|
// Function to add event listeners for the entire form
|
|
function addFormEventListeners(form) {
|
|
const plusIcon = form.querySelector('.add_sec .plus');
|
|
const minusIcon = form.querySelector('.add_sec .minus');
|
|
|
|
// Plus functionality: clone the entire form
|
|
plusIcon.addEventListener('click', function () {
|
|
const newFormClone = form.cloneNode(true); // Clone the entire form
|
|
cloneCounter++; // Increment counter for the clone
|
|
|
|
resetInputs(newFormClone, cloneCounter); // Reset inputs in the cloned form
|
|
|
|
// Add event listeners to the new cloned form
|
|
addFormEventListeners(newFormClone);
|
|
|
|
// Add dynamic section listeners for the cloned form
|
|
const originalDynamicSections = newFormClone.querySelectorAll('.dynamic');
|
|
originalDynamicSections.forEach(section => {
|
|
addDynamicSectionListeners(section);
|
|
});
|
|
|
|
form.parentNode.appendChild(newFormClone); // Append the new cloned form
|
|
});
|
|
|
|
// Minus functionality: remove the cloned form
|
|
minusIcon.addEventListener('click', function () {
|
|
const allForms = document.querySelectorAll('.userdetails form');
|
|
if (allForms.length > 1) { // Ensure at least one form remains
|
|
form.remove();
|
|
}
|
|
});
|
|
|
|
// Initialize dropdown behavior for the original form
|
|
addDropdownBehavior(form);
|
|
|
|
// Add dynamic section listeners for the original form
|
|
const dynamicSections = form.querySelectorAll('.dynamic');
|
|
dynamicSections.forEach(section => {
|
|
addDynamicSectionListeners(section);
|
|
});
|
|
}
|
|
|
|
// Initialize event listeners for the original form
|
|
const originalForm = document.querySelector('.userdetails form');
|
|
addFormEventListeners(originalForm);
|
|
|
|
|
|
|
|
|
|
//--------------------------Almost done code for cloning----------//
|
|
//let cloneCounter = 0; // Global counter to track cloned sections
|
|
|
|
function addDropdownBehavior(section) {
|
|
const accessDropdown = section.querySelector('[id^="access"]');
|
|
const portInputDiv = section.querySelector('[id^="portInputDiv"]');
|
|
const dynamicDropdownDiv = section.querySelector('[id^="dynamicDropdownDiv"]');
|
|
|
|
// Event listener function for dropdown change
|
|
function handleDropdownChange() {
|
|
const selectedValue = this.value;
|
|
|
|
// Show or hide input fields based on selection
|
|
if (selectedValue === 'Port') {
|
|
portInputDiv.classList.remove('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
} else if (selectedValue !== '') {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.remove('hidden');
|
|
|
|
let options = '';
|
|
if (selectedValue === 'Connectiontype') {
|
|
options = `<option value="wifi">WiFi</option><option value="ethernet">Ethernet</option>`;
|
|
} else if (selectedValue === 'Subtype') {
|
|
options = `<option value="fiber">Fiber</option><option value="dsl">DSL</option>`;
|
|
} else if (selectedValue === 'Switch') {
|
|
options = `<option value="switchA">Switch A</option><option value="switchB">Switch B</option>`;
|
|
}
|
|
|
|
// Ensure a full <select> element is rendered inside the dynamic dropdown div
|
|
dynamicDropdownDiv.innerHTML = `<select id="dynamicDropdown_${cloneCounter}" name="dynamicDropdown_${cloneCounter}">${options}</select>`;
|
|
} else {
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Remove any existing event listener first
|
|
accessDropdown.removeEventListener('change', handleDropdownChange);
|
|
accessDropdown.addEventListener('change', handleDropdownChange);
|
|
}
|
|
|
|
// Function to add event listeners for plus and minus icons in the dynamic section
|
|
function addDynamicSectionListeners(section) {
|
|
const plusIcon = section.querySelector('.plus');
|
|
const minusIcon = section.querySelector('.minus');
|
|
|
|
// Plus functionality: clone the dynamic section
|
|
plusIcon.addEventListener('click', function () {
|
|
const newDynamicClone = section.cloneNode(true); // Clone the dynamic section
|
|
|
|
// Increment the global counter to ensure unique ids/names
|
|
cloneCounter++;
|
|
|
|
// Reset inputs and dropdowns in the cloned section
|
|
resetInputs(newDynamicClone, cloneCounter);
|
|
|
|
section.parentNode.appendChild(newDynamicClone);
|
|
addDynamicSectionListeners(newDynamicClone); // Add listeners for the new section
|
|
addDropdownBehavior(newDynamicClone); // Initialize dropdown behavior for the new section
|
|
});
|
|
|
|
// Minus functionality: remove the dynamic section
|
|
minusIcon.addEventListener('click', function () {
|
|
if (section.parentNode.childElementCount > 1) { // Ensure at least one section remains
|
|
section.remove();
|
|
}
|
|
});
|
|
|
|
addDropdownBehavior(section); // Initialize dropdown behavior for this section
|
|
}
|
|
|
|
// Function to reset inputs, assign unique ids/names
|
|
function resetInputs(section, counter) {
|
|
const inputs = section.querySelectorAll('input, select');
|
|
inputs.forEach(input => {
|
|
if (input.type !== 'checkbox') {
|
|
input.value = ''; // Clear input fields
|
|
} else {
|
|
input.checked = false; // Uncheck checkboxes
|
|
}
|
|
|
|
// Assign unique names and IDs to cloned inputs
|
|
const baseName = input.name.replace(/_\d+$/, ''); // Strip off any previous clone counter
|
|
input.name = `${baseName}_${counter}`; // Add clone counter to name
|
|
|
|
const baseId = input.id.replace(/_\d+$/, ''); // Strip off any previous clone counter
|
|
input.id = `${baseId}_${counter}`; // Add clone counter to ID
|
|
});
|
|
|
|
section.querySelector('[id^="access"]').selectedIndex = 0; // Reset dropdown to default
|
|
|
|
// Hide input fields for the cloned section by default
|
|
const portInputDiv = section.querySelector('[id^="portInputDiv"]');
|
|
const dynamicDropdownDiv = section.querySelector('[id^="dynamicDropdownDiv"]');
|
|
portInputDiv.classList.add('hidden');
|
|
dynamicDropdownDiv.innerHTML = ''; // Clear any previous dynamic dropdowns
|
|
}
|
|
|
|
// Function to clear all dynamic sections in the cloned form
|
|
function clearDynamicSections(form) {
|
|
const existingDynamicSections = form.querySelectorAll('.dynamic');
|
|
existingDynamicSections.forEach(section => {
|
|
const dynamicDropdownDiv = section.querySelector('[id^="dynamicDropdownDiv"]');
|
|
dynamicDropdownDiv.innerHTML = ''; // Clear dynamic dropdowns
|
|
});
|
|
}
|
|
|
|
// Function to add event listeners for the entire form
|
|
function addFormEventListeners(form) {
|
|
const plusIcon = form.querySelector('.add_sec .plus');
|
|
const minusIcon = form.querySelector('.add_sec .minus');
|
|
|
|
// Plus functionality: clone the entire form
|
|
plusIcon.addEventListener('click', function () {
|
|
const newFormClone = form.cloneNode(true); // Clone the entire form
|
|
cloneCounter++; // Increment counter for the clone
|
|
|
|
resetInputs(newFormClone, cloneCounter); // Reset inputs in the cloned form
|
|
clearDynamicSections(newFormClone); // Clear any dynamic dropdowns in the cloned form
|
|
|
|
// Add event listeners to the new cloned form
|
|
addFormEventListeners(newFormClone);
|
|
|
|
form.parentNode.appendChild(newFormClone); // Append the new cloned form
|
|
});
|
|
|
|
// Minus functionality: remove the cloned form
|
|
minusIcon.addEventListener('click', function () {
|
|
const allForms = document.querySelectorAll('.userdetails form');
|
|
if (allForms.length > 1) { // Ensure at least one form remains
|
|
form.remove();
|
|
}
|
|
});
|
|
|
|
// Initialize dropdown behavior for the original form
|
|
addDropdownBehavior(form);
|
|
|
|
// Add dynamic section listeners for the original form
|
|
const dynamicSections = form.querySelectorAll('.dynamic');
|
|
dynamicSections.forEach(section => {
|
|
addDynamicSectionListeners(section);
|
|
});
|
|
}
|
|
|
|
// Initialize event listeners for the original form
|
|
//const originalForm = document.querySelector('.userdetails form');
|
|
addFormEventListeners(originalForm);
|