Как я могу показать один элемент формы на каждой странице?

Question

Как выглядит неплохо, чтобы показать все вопросы в веб-приложении, я хочу задать один вопрос на одной странице. Однако, когда я набираю этот код, кнопка «предыдущая» не работает. После того, как я нажимаю на предыдущую кнопку, «следующая» кнопка не появляется. Однако могу ли я сделать это хорошо, а также показать номер страницы? Большое спасибо.

Это мой код:

<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> 

Это форма часть:

<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

Вы должны использовать $.ajax(), в которой вы должны пройти текущий индекс для следующей или предыдущей и получить предыдущий или следующий вопрос, например:

$(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 
    }); 
});