Question

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 CHANGE

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!

Answer 1

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/