Question

I want to make a Jquery form, having form structure like this

panel1{
Name
address
age 
years of experience
}

panel2{
graduation deatails.
first year marks
second year marks
third year marks
}

panel3{

some more fileds

}

then a
NEXTButton previousButton

i want to achinve that at first only first panel should be visible
when i claick the next button the second panel should be visible and 1st and 3rd should be hidden’
and vise versa.
I also want that value should be persist and on next and previos and also the validation should be applicable

could some body suggest me how can i achive this, i am novice for this.

Answer 1

<div id="step1">
    <div>Content1 <span id="go_to_2">Next</span></div>
</div>

<div id="step2" style="display:none;">
    <div>Content2 <span id="back_to_1">Previous</span><span id="go_to_3">Next</span></div>
</div>

<div id="step3" style="display:none;">
    <div>Content4 <span id="back_to_2">Previous</span><span id="finish">finish</span>
</div>

Jquery:

$('#go_to_2').click(function(){
    ('#step1').hide();
    ('#step2').show();
});
$('#go_to_3').click(function(){
    ('#step2').hide();
    ('#step3').show();
});
$('#finish').click(function(){
    ('#step3').hide();
    // Submit form etc
});
$('#back_to_1').click(function(){
    ('#step2').hide();
    ('#step1').show();
});
$('#back_to_2').click(function(){
    ('#step3').hide();
    ('#step2').show();
});

Hope this helps.