How to keep track of steps/step #'s in a multi-step form with JS?

How to keep track of steps/step #'s in a multi-step form with JS? I am working on a multi-step form challenge from devChallenges. I've got most of the form validation complete but I'm a bit stuck on how best to keep track of and display the current step number. Ideally, the dot indicators should be connected but I'm not worried about that at the moment. Right now, the step number increments higher than it should and clicking the button after the Success message pops up causes the content to disappear. If anyone has the time/energy to take a look and offer suggestions, I would greatly appreciate it. Thank you in advance! https://codepen.io/savvystrider/pen/rNogJro
5 Replies
glutonium
glutonium13mo ago
well for the nunbers increasing more than 3 can simply be solved via a condition if i am not wrong say the variable that's being incremented here is steps the condition may look something like
steps < 4 ? steps++ : undefined
steps < 4 ? steps++ : undefined
and for the dots, ig if u have 3 divs for 3 dots, u can get those 3 dots sequentially using querySelectorAll() and then basically whatever the step counter is, u subtract 1 from that and use that as the index for which dot should he highlighted we r subtracting 1 since index starts from 0 you can use utility class for highlighting style
.highlight{
// code
}
.highlight{
// code
}
let dots = document.que..All('.className');

continue.onclick = () => {
if(step - 2 >= 0) {
dots[step - 2].classList.remove("highlight");
}
dots[step - 1].classList.add("highlight");
}
let dots = document.que..All('.className');

continue.onclick = () => {
if(step - 2 >= 0) {
dots[step - 2].classList.remove("highlight");
}
dots[step - 1].classList.add("highlight");
}
savvystrider15
savvystrider1513mo ago
I tried something similar to steps < 4 ? steps++ : undefined but I couldn't figure out where to put a check like that within my code. Does it belong in the submitBtn event handler or outside of it?
glutonium
glutonium13mo ago
this needs to be checked everytime the submit button is clicked so yes it should be inside the click event listener for the submit button
savvystrider15
savvystrider1513mo ago
Thanks for taking a look! I'll give it a shot
glutonium
glutonium13mo ago
linux
Want results from more Discord servers?
Add your server