OnChange AJAX кажется сложным с динамическими значениями

Question

Так что я планирую отображать все элементы на одной странице с их определенным набором, который ссылается на $_GET.Все в порядке, он отображает все, но когда я хочу предупредить все id с помощью запроса onchange, кажется, что элементы не дублируются.Я использую оповещение на JavaScript, чтобы проверить идентификатор и другой объект в базе данных

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

Проблема в том, что вы используете одинаковые имена и идентификаторы для каждого вопроса в цикле. Вам нужно добавить идентификатор вопроса ко всем этим вещам, чтобы сделать их различимыми. Все остальные идентификаторы должны быть классами.

Затем, когда пользователь отвечает на вопрос, вам необходимо получить значение этого ответа и идентификатор вопроса, частью которого он является. Для этого вы можете использовать функции навигации 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;
}
?>