php - 如何在php中的表单向导中显示一项数据？

Question

在问题1中的图像上，当我单击下一个问题时，它应该显示第一个问题，它应该显示第二个问题，但问题是在问题1和问题2中显示两个问题，我已经尝试过以下问题，请纠正我什么我在代码中做错了..反对者请说明原因

 <?php
      include("../view/common/head.php");
 ?>
<style>
#registration-step{margin:0;padding:0;}
#registration-step li{list-style:none; float:left;padding:5px 10px;border-top:#EEE 1px solid;border-left:#EEE 1px solid;border-right:#EEE 1px solid;}
#registration-step li.highlight{background-color:#EEE;}
#registration-form{clear:both;border:1px #EEE solid;padding:20px;}
.demoInputBox{padding: 10px;border: #F0F0F0 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
.registration-error{color:#FF0000; padding-left:15px;}
.message {color: #00FF00;font-weight: bold;width: 100%;padding: 10;}
.btnAction{padding: 5px 10px;background-color: #09F;border: 0;color: #FFF;cursor: pointer; margin-top:15px;}
</style>
<script>

$(document).ready(function() {
    $("#next").click(function(){

            var current = $(".highlight");
            var next = $(".highlight").next("li");
            if(next.length>0) {
                $("#"+current.attr("id")+"-field").hide();
                $("#"+next.attr("id")+"-field").show();
                $("#back").show();
                $("#finish").hide();
                $(".highlight").removeClass("highlight");
                next.addClass("highlight");
                if($(".highlight").attr("id") == $("li").last().attr("id")) {
                    $("#next").hide();
                    $("#finish").show();                

            }
        }
    });
    $("#back").click(function(){ 
        var current = $(".highlight");
        var prev = $(".highlight").prev("li");
        if(prev.length>0) {
            $("#"+current.attr("id")+"-field").hide();
            $("#"+prev.attr("id")+"-field").show();
            $("#next").show();
            $("#finish").hide();
            $(".highlight").removeClass("highlight");
            prev.addClass("highlight");
            if($(".highlight").attr("id") == $("li").first().attr("id")) {
                $("#back").hide();          
            }
        }
    });
});
</script>

<?php
include('../model/functions.php');
if(!empty($_POST['course']) &&!empty($_POST['paper'])){
 $course=$_POST['course'];
 $paper=$_POST['paper'];
}
$sql="SELECT a.course_name,b.paper_name,c.set_name,d.* from courses a left outer join papers b on a.course_id=b.course_id left outer join question_sets c on b.paper_id=c.paper_id left outer join questions d on d.set_id=c.set_id where a.course_name='java' AND b.paper_id=2 AND c.set_id=3;
";
$result=$conn->query($sql);
$rowcount=$result->num_rows;
while($row=$result->fetch_assoc())
{
    $selectoutter[]=$row;
}
 foreach($selectoutter as $ques)
 {
    $questionid[]=$ques['question_id'];
    $question[]=$ques['question_text'];
    $option1[]=$ques['option_1'];
    $option2[]=$ques['option_2'];
    $option3[]=$ques['option_3'];
    $option4[]=$ques['option_4'];
 }
 ?>
 <ul id="registration-step">
<li id="account" class="highlight">Account</li>
<li id="password">Credentials</li>
</ul>

<form name="frmRegistration" id="registration-form" method="post">
 <?php
 for($i=0;$i<$rowcount;$i++)
 {

echo '<div id="'.$questionid[$i].'">';
echo '<p>'.$question[$i].'<p>';
echo '<input type="radio" name="question">'.$option1[$i].'<br>';
echo '<input type="radio" name="question">'.$option2[$i].'<br>';
echo '<input type="radio" name="question">'.$option3[$i].'<br>';
echo '<input type="radio" name="question">'.$option4[$i].'<br>';
echo '</div>';
echo '<br/>';
 }
?>
<div>
        <input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
        <input class="btnAction" type="button" name="next" id="next" value="Next" >
        <input class="btnAction" type="submit" name="finish" id="finish" value="Finish" style="display:none;">
    </div>

</form>

</html>

Answer 1

最好对每个新问题使用 AJAX 调用，如下所示

function getQuestion(type, options){
    if(type == 0){
        data = {type:"getQuestion"}
    } else if(type == 1){
        data = {type: "submitAndGetQuestion", questionID = option['ID'], questionAnswer = option['answer']}
    } else if(type == 2){
        data = {type: "submit", questionID = option['ID'], questionAnswer = option['answer']}
    }
     $.ajax({    
         type: 'post',
         url: 'ajax.php',
         dataType: 'json',
         data: {type:"question"}
         success: function(response) {
            //populate response in forms
            //print questionID (will be usefull when submit answer)
         },
         error: function (e) {
            console.log(e)
          },
      });
}

第一次调用getQuestion(0,null);接下来的每个提交调用都会被调用

 $("#submit").live('click',function() {
    // get Question ID 
    // get answer
    var options ={};
    var options['ID'] = questionID;
    var options['answer'] = questionAnswer;
    getQuestion(1,options);
});

终于当时间过去了，简单的通话 如果您想删除表单或进行重定向，请调用 getQuestion(2,null);。

在ajax.php中

<?php 
if($_POST['type'] == "getQuestion"){
    // get one question from table
    $result = select_tables($query);// LIMIT 1 to get one question
    echo json_encode($result);
} else if($_POST['type'] == "submitAndGetQuestion"){
    //store last question answer into db 
    $id = $_POST['questionID'];
    $answer = $_POST['questionAnswer'];
    updateQuestionForUser();
    //then again get a question
    $result = select_tables($query);// LIMIT 1 to get one question
    echo json_encode($result);
}