OnChange AJAX似乎与动态值复杂

时间:2019-03-17 11:44:58

标签: php jquery ajax

所以我的计划是在一个页面中显示所有包含其特定集合的项目,这些集合指向$_GET。一切都很好,它显示了所有内容,但是当我想使用onchange查询来提醒所有ID时,似乎项目没有重复。我在javascript上使用警报来检查ID和数据库中的其他对象

<?php 
$quiz_item = $_GET['quiz_item'] ; 
$item =0;
$quiz_sql = "SELECT * from quizmultiple 
where quiz_set ='$quiz_item'";
$quiz_query = mysqli_query($con,$quiz_sql);
while($quiz_row = 
mysqli_fetch_assoc($quiz_query)) {


?> 

 <div class='itemcontainer'>


 <div class="card" style="width:40%;">
   <div class="card-header">
 Question #: <?php  $item++;  echo $item;  
  ?>
  </div>
  <div class="card-body">
  <blockquote class="blockquote mb-0">
  <p><?php echo $quiz_row['question']; ?> 
 </p>

</blockquote>

</div>
<div style="margin:5px;">
<ul class="list-group list-group-flush" 
 style="width: 90%;"> 
<form id='form_question'>
<li class="list-group-item">
<input type="radio" id="choice_user" 
 class="form_question" name="gender" 
 value="<?php echo $quiz_row['choice_a'];? 
 >">
 </li>
 <li class="list-group-item">
 <input type="radio" id="choice_user" 
  class="form_question" name="gender" 
value="<?php echo $quiz_row['choice_b'];? 
>">
</li>
<li class="list-group-item"> 
<input type="radio" id="choice_user" 
 class="form_question" name="gender" 
 value="<?php echo $quiz_row['choice_c'];? 
 >">
 </li>
 <li class="list-group-item"> 
 <input type="radio" id="choice_user"  
 class="form_question" name="gender" 
 value="<?php echo $quiz_row['choice_d'];? 
 >">
</li>
<input type="text" id="number_id" value="<? 
php echo $quiz_row['id'];?>"/>
    <input type="text" id="true_answer" 
value="<?php echo 
$quiz_row['true_answer'];?>"/>
</form>
</ul>
</div>

</div>
</div> 
<?php 
}
?>  



<script>
$(document).ready(function() {
  $(".form_question").change(function(){

   var choice_final = $('#choice_user').val();
   var id_question = $('#number_id').val(); 
       $.ajax({
        url:"checkanswers.php",
        method:"POST",
        data: {id:id_question,choice:choice_final},
        success:function(data){
          alert(data);     



                }



            });
     });
  });

 </script> 



 <?php 

 if(isset($_POST)) {
$id = $_POST['id'];
$choice = $_POST['choice'];

echo $id;
echo $choice;
}

?>

1 个答案:

答案 0 :(得分:0)

问题是您在循环中为每个问题使用了相同的名称和ID。您需要将问题ID添加到所有这些内容中以使其与众不同。所有其他ID应该是类。

然后,当用户回答问题时,您需要获取该答案的值及其所在问题的ID。您可以使用DOM导航功能来做到这一点。

<?php 
$quiz_item = $_GET['quiz_item'] ; 
$item =0;
$quiz_sql = "SELECT * from quizmultiple 
where quiz_set ='$quiz_item'";
$quiz_query = mysqli_query($con,$quiz_sql);
while($quiz_row = mysqli_fetch_assoc($quiz_query)) {
    ?> 
    <div class='itemcontainer'>
    <div class="card" style="width:40%;">
    <div class="card-header">
    Question #: <?php  $item++;  echo $item; ?>
    </div>
    <div class="card-body">
    <blockquote class="blockquote mb-0">
    <p><?php echo $quiz_row['question']; ?> 
    </p>

    </blockquote>

    </div>
    <div style="margin:5px;">
    <ul class="list-group list-group-flush" style="width: 90%;"> 
    <form>
    <li class="list-group-item">
    <input type="radio" class="choice_user form_question" name="gender_<?php echo $quiz_row['id'];?>" value="<?php echo $quiz_row['choice_a'];?>">
        </li>
    <li class="list-group-item">
    <input type="radio" class="choice_user form_question" name="gender_<?php echo $quiz_row['id'];?>" value="<?php echo $quiz_row['choice_b'];?>">
    </li>
    <li class="list-group-item"> 
    <input type="radio" class="choice_user form_question" name="gender_<?php echo $quiz_row['id'];?>" value="<?php echo $quiz_row['choice_c'];? >">
    </li>
    <li class="list-group-item"> 
    <input type="radio" class="choice_user form_question" name="gender_<?php echo $quiz_row['id'];?>" value="<?php echo $quiz_row['choice_d'];? >">
    </li>
    <input type="text" class="number_id" value="<?php echo $quiz_row['id'];?>"/>
    <input type="text" class="true_answer" value="<?php echo $quiz_row['true_answer'];?>"/>
    </form>
    </ul>
    </div>

    </div>
    </div> 
    <?php 
}
?>  

<script>
    $(document).ready(function() {
        $(".form_question").change(function(){
            var choice_final = $(this).val();
            var id_question = $(this).closest('form').find('.number_id').val(); 
            $.ajax({
                url:"checkanswers.php",
                method:"POST",
                data: {id:id_question,choice:choice_final},
                success:function(data){
                    alert(data);     
                }
            });
        });
    });
</script> 
<?php 
if(isset($_POST)) {
    $id = $_POST['id'];
    $choice = $_POST['choice'];

    echo $id;
    echo $choice;
}
?>