Kevin Powell - Community•14mo ago

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

savvystrider

CodePen

devChallenges - Multi-step form

...

5 Replies

glutonium•14mo 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");
}

savvystrider15OP•14mo 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•14mo 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

savvystrider15OP•14mo ago

Thanks for taking a look! I'll give it a shot

glutonium•14mo ago

Gaming

Programming

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