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

时间:2015-03-25 04:48:46

标签: php jquery

由于在网络应用中显示所有问题似乎不太好,我想在一个页面中提出一个问题。 但是,当我输入这些代码时," previous"按钮不起作用。 点击上一个按钮后," next"按钮不会在之后。 但是我可以做得好并且还显示页码? 非常感谢。

这些是我的代码:

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

1 个答案:

答案 0 :(得分:0)

您需要使用$.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
    });
});