modern portal
Hi! I'm having troubles with combining functions in multistep form.
I have two steps inside my form.
on Step 1 - (workspaces) there are a few inputs as checkboxes for user to select from.
Step 2 - (brands) shows another set of input checkboxes, based on selection from step 1.
I have written below code, to check that:
``javascript
function checkWorkspaceAccess(){
const workspaceInputs = document.querySelectorAll('.access-input__workspace');
const brandInputs = document.querySelectorAll('.access-input__brand');
workspaceInputs.forEach((workspaceInput) => {
workspaceInput.addEventListener('input', () => {
brandInputs.forEach((brandInput) => {
if (workspaceInput.checked){
brandInput.disabled = false;
} else{
brandInput.disabled = true;
}
})
})
})
} ```
But on Step 1, I also have button with 'select-all' inputs functionality. The problem is, When I use this button, all checkboxes from step 1 change their 'checked' value, but inputs from Step 2 are not affected.
``javascript
function selectAllWorkspaces(){
const selectAllBtnWorkspaces = document.querySelector('.form-select-all__workspaces');
const workspaceInputs = document.querySelectorAll('.access-input__workspace');
selectAllBtnWorkspaces.addEventListener('click', ()=> {
workspaceInputs.forEach(workspaceInput => {
workspaceInput.checked = !workspaceInput.checked;
})
})
}
I have tried to put one function as an argument to another, or just simply invoke it inside - but it didn't work.
How can I combine these two functions to work?
twin silo
