multiple step form

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_开发者_JAVA百科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>

---

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

---

$('body').delegate('button.submit_step2, nav a.navbtnnext_1', 'click', function(){
    $('.step2').slideUp();
    $('.step3').slideDown();
});

you must use live or delegate when you're dynamically changing classes

---

Here you have a full working simple example, with no need to jQuery.

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <input type="number" value="1" id="num1"><br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>