Multi Step form with results from previous action shown on top (with ability to edit)

I really did search.

What I'm trying to do is to make a form which asks questions over a couple of pages, and each time I go to the next page, the Input from the previous page gets placed on top of the page with the ability to edit.

Please choose a date: |DATE INPUT|

|NEXT|

Date: 28/07/2011 CHAN开发者_开发技巧GE

Please choose a category:

• CAT A
• CAT B
• CAT C

|NEXT|

Date: 28/07/2011 CHANGE

Category: CAT B CHANGE

And so on and so on. Thaks!

try that:

<style>

.question {
    display: none;
}
.question.active,.question.answered {
    display: block;
}
.question.answered input {
    border: 1px solid black;
}
</style>
<div class="question active">Q1<input type="text"></div>
<div class="question new">Q2<input type="text"></div>
<div class="question new">Q3<input type="text"></div>
<div class="question new">Q4<input type="text"></div>
<button id="NEXT">NEXT</button>

<script>
$('button#NEXT').click(function() {
    $('.question.active').removeClass('active').addClass('answered');
    $('.question.new').first().addClass('active').removeClass('new');
})
</script>

that is demo : http://jsfiddle.net/oceog/z9hDm/

You can work here with session and numerated pages.

After posting first page, save it to $_SESSION['page1']

If you'll count pages, you can convert it to:

$_SESSION['page' . $currentPage]

and then printing will be a piece of cake:

for ( $i = 1; $i < $currentPage; $i++ ) {
    $data = $_SESSION['page' . $currentPage];
    var_dump($data);
}