CODEWITHSUNDEEP
jquery
MRWBSN
MRWBSN

Reputation: 123

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_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>

Upvotes: 2

Views: 2662

Answers (3)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16243

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>

Upvotes: 0

David
David

Reputation: 42237

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

Upvotes: 2

genesis
genesis

Reputation: 50976

$('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

Upvotes: 1

Related Questions