Question

i am learn to make a multiple step form. i use this jquery code :

    $('nav a:last').replaceWith('<a href="#" id="navbtnnext" class="navbtnnext_0">');

    $('form').submit(function(){
        return false;
    });

    $('button.submit_step1, nav a.navbtnnext_0').click(function(){
        $('nav a:first').replaceWith('<a href="#" id="navbtnprev"></a>');
        $('.step1').slideUp();
        $('.step2').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_0').addClass('navbtnnext_1');
    });

    $('button.submit_step2, nav a.navbtnnext_1').click(function(){
        $('.step2').slideUp();
        $('.step3').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_1').addClass('navbtnnext_2');
    });

    $('button.submit_step3, nav a.navbtnnext_2').click(function(){
        $('.step2').slideUp();
        $('.step3').slideDown();
        $('nav a#navbtnnext').removeClass('navbtnnext_2').addClass('navbtnnext_3');
    });

when i clicked nav a.navbtnnext_1 why .step2 not change into .step3?! something wrong with my code? please help me..

here’s my html code :

       <nav class="grid_12">
            <a id="navbtnprevdisabled"></a>
            <a id="navbtnnextdisabled"></a>
        </nav>
        <div class="clear"></div>
        <div id="main" class="grid_12" role="main">
            <section id="form">
                <form>
                    <div class="step1">
                        test 1
                        <hr>
                        <button class="submit_step1">Next</button>
                    </div>
                    <div class="step2">
                        test 2
                        <hr>
                        <button class="submit_step2">Next</button>
                    </div>
                    <div class="step3">
                        test 3
                        <hr>
                        <button class="submit_step3">Next</button>
                    </div>

Answer 1

Having those hard-coded buttons in there makes it difficult to scale your form. It would be better if you just used classes instead of ids for the buttons.

This is the most basic example that I can come up with.

$(document).ready(function(){

  $('.btnNext').click(function(e){
    e.preventDefault();
    $(this).closest('fieldset').slideUp().next().slideDown();

  });
  $('.btnPrev').click(function(e){
    e.preventDefault();
    $(this).closest('fieldset').slideUp().prev().slideDown();

  });
});

And here is the html to go with it.

  <form>
    <fieldset>
      <legend>Step 1</legend>
      <input /><br/>
      <button class="btnNext">Next</next>
    </fieldset>
    <fieldset class="hidden">
      <legend>Step 2</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 3</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 4</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><button class="btnNext">Next</button>
    </fieldset>
    <fieldset  class="hidden">
      <legend>Step 5</legend>
      <input /><br/>
      <button class="btnPrev">Previous</button><input type="submit" />
    </fieldset>
  </form>

And finaly here is a link to a working example http://jsbin.com/oyoboc/2/edit