simsalabim33 simsalabim33 - 8 months ago 43
Javascript Question

Multi step calculator with progress bar doesn't work

I'm a new to HTML, CSS and JavaScript and now I have a problem and I'm stuck.

My problem is that when I click next to go to the next div my progress bar doesn't work but I get the next div.

I saw a solution similar to mine but they also have the problem that the progress bar jump to the last step instead of the "next" step.
Here is the solution I refer to:
Multi-step form "next" button not working

My Fiddle

// Script till next action knappen och step indicator
var current_fs = "active";
var next_fs = 1;
$('#next').click(function() {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
$('#progressbar li').eq($("current").index(next_fs)).addClass("active");
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
$('#prev').attr('disabled', null);

Bic Bic

A couple of things are wrong with your code:

  1. Element ids should not begin with a numeric character. You can put numbers in them, but make sure the first character is an alpha [a-z].

  2. You are using jQuery without including jQuery

  3. You are not properly closing your $(document).ready(function () { ... } );. You need one last set of }); at the end of your code.

  4. Your logic for getting the next progress item seems wonky to me. I'm not sure what exactly you're trying to do, but I think this will do it:


$('#progressbar li').eq($("current").index(next_fs)).addClass("active");

With this:

$("#progressbar .active").removeClass('active').next().addClass('active');

Here is an updated Fiddle