如何在每个页面显示一个表单元素？

Question

As it looks not good to show all questions in a web app, I want to make one question in one page. However, when I type these code, the "previous" button doesn't work. After I click on the previous button, the "next" button doesn't ever after. However can I make it well and also show the page number? Thanks a lot.

These are my code:

<script>

$(document).ready(function(){
var totalQuestions = $('.questions').size();
var currentQuestion = 0;
$questions = $('.questions');
$questions.hide();
$($questions.get(currentQuestion)).fadeIn();

$('#next').click(function(){
    $($questions.get(currentQuestion)).fadeOut(function(){
        currentQuestion = currentQuestion + 1;
        $($questions.get(currentQuestion)).fadeIn();
    });


if(currentQuestion==(totalQuestions-2)){
$('#next').attr("class","ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right ui-state-disabled ui-btn-inline");
}else{
$('#next').attr("class","ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right ui-btn-inline");
}


});

$('#prev').click(function(){
    $($questions.get(currentQuestion)).fadeOut(function(){
        currentQuestion = currentQuestion - 1;
        $($questions.get(currentQuestion)).fadeIn();
    });

    if(currentQuestion==1||currentQuestion==0){
$('#prev').attr("class","ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left ui-state-disabled ui-btn-inline");
}

});
});
    $(document).ready(function () {
        $('div.questions').find('input:radio').prop('checked', false);
    });
</script>

These are the form part:

<form action="result.php?id=<?php echo $course_id;?>&cm_id=<?php echo $cm_id; ?>" method="post">
<?php
$getAssessmentSQL="SELECT * FROM assessment WHERE course_material_id=$cm_id order by rand()";
$ResultAssessment=mysql_query($getAssessmentSQL); 
// display a series of random images - PHP form solution 
// (c) 2004 David Pankhurst - use freely, but please leave in my credit 
$j=array(1,2,3,4); 
srand(time()); 
shuffle($j); 
while($getAssessment=mysql_fetch_array($ResultAssessment)){

//if multiple choice, then this method
echo "<div class='questions'>";
echo "<legend>".$getAssessment['question']."</legend>";
echo "<div class='options'>";
echo "<fieldset data-role='controlgroup'>";

for($i=0;$i<4;$i++){
echo "<label for='".$getAssessment['assessment_id'].$j[$i]."'>".$getAssessment['choice'.$j[$i]]."</label>
<input class='option' type='radio' name='".$getAssessment['assessment_id']."' id='".$getAssessment['assessment_id'].$j[$i]."' value='".$j[$i]."'>
";
}

echo "</fieldset>";
echo "</div>";
echo "</div>";
}
?>
<a name="ClickPrev" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left ui-btn-inline" id="prev">Previous</a>

<a name="ClickNext" class="ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right ui-btn-inline" id="next">Next</a>




<button type="submit" name="submit" value="submit" data-theme="b">Submit</button>
</form>

Answer 1

You need to use $.ajax() in which you need to pass the current index for next or previous and get previous or next question like,

$(function(){
    function getQuestion(type){
       $.ajax({
           url:'getQuestion.php',type:'post',
           // type for prev or next from curentQuestion Index
           data:{curentQuestion:currentQuestion,type:type},
           success:function( response ){
               $('form').html(response);
           }
       });
    }
    // code to get previous or next question
    $('#prev,#next').on('click',function(){
        getQuestion(this.id);// pass id to get next or prev question
    });
});