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
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
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
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?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
Thanks for taking a look! I'll give it a shot