Building a jQuery Step-by-Step Form

http://brenelz.com/blog/building-a-jquery-step-by-step-form/

by Akram kamal

HTML

<h1>Camper Application Form</h1>
 
<p>Please use this online application form to register for camp.</p>
<form id="camperapplicationForm"method="post" action="">
 
<div id="first-step">
    <h2>First Step</h2>
    <div>
        <div class="label"><label for="Gender">Gender</label></div>
        <select name="Gender" id="Gender">
            <option value="" selected="selected"></option>
            <option value="Male">Male</option>
 
            <option value="Female">Female</option>
        </select>
    </div>
 
    <div>
        <div class="label"><label for="Grade">Grade in Fall 2009</label></div>
        <select name="Grade" id="Grade">
            <option value="" selected="selected"></option>
            <option value="K">K</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
    </div>
 
</div>
 
<div id="second-step">
    <h2>Second Step</h2>
    <div class="label"><label for="Site">Site</label></div>
    <select name="Site" id="Site">
 
        <option value="" selected="selected"></option>
        <option value="Cross-View">Cross View (Main Site)</option>
        <option value="Teepee-Village">Teepee Village</option>
        <option value="Mission-Point">Mission Point</option>
    </select>
</div> <!-- end second-step -->
 
<div id="last-step">
    <h2>Last Step</h2>
    <p>Please select one of the following payment methods.</p>
    <div>
        <input type="radio" name="payment" id="payment0" value="Credit Card" /><label>Credit Card</label>
    </div>
    <div>
        <input...

JavaScript

var prevLink = '<a class="prev" href="#">< < Prev</a>';
        var nextLink = '</a><a class="next" href="#">Next >></a>';
        var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
        $(function(){
            // init
            $('#camperapplicationForm > div')
                .hide()
                .append(navHTML);
            $('#first-step .prev').remove();
            $('#last-step .next').remove();
 
            // show first step
            $('#first-step').show();
 
            $('a.next').click(function(){
                var whichStep = $(this).parent().parent().attr('id');
 
                if( whichStep == 'first-step' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }
 
                $(this).parent().parent().hide().next().show();
            });
 
            $('a.prev').click(function(){
                $(this).parent().parent().hide().prev().show();
            });
        });