-4

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
$(document).ready(function(){
    var current_fs = "active";
    var next_fs = 1;
$('#next').click(function() {
current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    $('.current').removeClass('current').hide()
        .next().show().addClass('current');
   $('#progressbar li').eq($("current").index(next_fs)).addClass("active");
    if ($('.current').hasClass('last')) {
        $('#next').attr('disabled', true);
    }
    $('#prev').attr('disabled', null);
});
Community
  • 1
  • 1
simsalabim33
  • 75
  • 1
  • 2
  • 8
  • 1
    [Welcome to Stack Overflow](http://stackoverflow.com/tour). Please explain what doesn't work to your expectation and what you've tried to so far. – Jonathan Feb 27 '14 at 20:20
  • Your fiddle code is using jQuery, but you are not including jQuery. – Bic Feb 27 '14 at 20:20
  • I'm sorry for bad explanation, my fiddle is bad and my code doesn't look like that. But if you check the subject i referenced to, and test the last fiddle is posted there, i have a similar solution, in that solution and in mine, the progress bar jump to the last step when hitting next. I'm really sorry for bad explanation. Thanks for the welcoming. – simsalabim33 Feb 27 '14 at 20:28
  • Please clean up tour fiddle so it replicates the problem you are experiencing, or link to a page with your full code. The question you link to has an accepted answer, so we need to be able to discern how your code differs from that example. – Patrick M Feb 27 '14 at 21:44
  • I understand Patrick, and i'm sorry for the bad explanation and bad fiddle. But i have already solved it with help from @Bic and now it has an accepted answer. It is my first time to ask help like this and first time i use fiddle. Thank you anyway. – simsalabim33 Feb 27 '14 at 22:26

1 Answers1

1

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:

Replace:

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

With this:

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

Here is an updated Fiddle

Bic
  • 3,141
  • 18
  • 29
  • Thank you very much it works and that is what i was looking for, but still one question, now the progress bar are jumping one step at the time and it will be marked green at the point, i wounder if i can keep the hole green, like; step 1 complete stay green, step 2 complete stay green with step 1 and so go on. If its possible of course. Thank you very much. I appreciate your help. ;) – simsalabim33 Feb 27 '14 at 20:40
  • @user3361351 just remove the `.removeClass('active')` – Bic Feb 27 '14 at 20:40