OnChange AJAX似乎与动态值复杂化

Question

So my plan is to display all items in one page with their specific set which refers to $_GET . All is fine, it displays all but when I want to alert all of the id using onchange query, it seems like the items is not duplicating. I use alert on javascript to check the id and other object in database

<?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;
}

?>

Answer 1

The problem is that you're using the same names and IDs for each question in the loop. You need to add the question ID to all these things to make them distinct. All the other IDs should be classes.

Then when the user answers a question, you need to get the value of that answer, and the ID of the question it's part of. You can use DOM navigation functions to do that.

<?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;
}
?>