So I'm trying to make a multi-step form with the active class applied to the current step. Upon clicking next I want to remove that class and add it to the next iteration of those classes.
const nextBtn = document.querySelectorAll('.next');
const prevBtn = document.querySelectorAll('.previous');
const submitBtn = document.querySelectorAll('.submit');
const progress_li = document.querySelector('.progress-bar_li');
const fieldset = document.getElementsByTagName('fieldset');
const step = document.getElementsByClassName(
'step'
);
const active_fieldset = document.getElementsByClassName('activeFieldset');
[...nextBtn].forEach(el => {
el.addEventListener('click', e => {
e.preventDefault();
[...registration_fieldset].forEach((className, i) => {
if (className.classList.contains('activeFieldset')) {
className.classList.remove('activeFieldset');
step[i + 1].classList.add('activeFieldset');
//^this doesn't work, nor does subbing step with className
}
});
});
});Pug
mixin nextandprev
.btn-small.btn-small__reg.next Next
.btn-small.btn-small__reg.previous Previous
mixin next
.btn-small.btn-small__reg.next Next
mixin prevandsubmit
.btn-small.btn-small__reg.previous Previous
.btn-small.btn-small__reg.submit Submit
<fieldset class="step activeFieldset">part 1
+next
</fieldset>
<fieldset>
<fieldset class="step">sub 1 part 2
nextandprev
</fieldset>
<fieldset class="step"> sub 2 part 2
nextandprev
</fieldset>
</fieldset>
<fieldset class="step">part 3
nextandprev
</fieldset>
<fieldset class="step">part 4
nextandprev
</fieldset>
<fieldset class="step">part 5
nextandprev
</fieldset>Assuming you have the same number of next buttons and steps, you could use the button index with the step index to add the class onto the next step and remove from all the other steps.
const nextBtn = document.querySelectorAll('.next');
const prevBtn = document.querySelectorAll('.previous');
const steps = document.querySelectorAll('.step');
nextBtn.forEach((btn, btnIndex) => {
btn.addEventListener('click', (e) => {
e.preventDefault();
steps.forEach((step, stepIndex) => {
// If button is for next step, add class to next step, else remove
if (btnIndex === stepIndex - 1) {
step.classList.add('activeFieldset');
} else {
step.classList.remove('activeFieldset');
}
});
});
});.activeFieldset {
border: 1px solid red;
}<fieldset class="step activeFieldset">
<div>Part 1</div>
<button class="next">Next</button>
</fieldset>
<fieldset>
<fieldset class="step">
<div>Sub 1 Part 2</div>
<button class="previous">Prev</button>
<button class="next">Next</button>
</fieldset>
<fieldset class="step">
<div>Sub 2 Part 2</div>
<button class="previous">Prev</button>
<button class="next">Next</button>
</fieldset>
</fieldset>
<fieldset class="step">
<div>Part 3</div>
<button class="previous">Prev</button>
<button class="next">Next</button>
</fieldset>
<fieldset class="step">
<div>Part 4</div>
<button class="previous">Prev</button>
<button class="next">Next</button>
</fieldset>
<fieldset class="step">
<div>Part 5</div>
<button class="previous">Prev</button>
<button class="next">Next</button>
</fieldset>