OnChange AJAX seems complication with dynamic values

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

?>

IDs have to be unique, you can't have multiple `id="choice_user"` — Barmar, Mar 17 '19 at 11:49
It has nothing to do with dynamic values. `$('#choice_user').val()` will just get the value of the first button, not the value of the selected button. — Barmar, Mar 17 '19 at 11:51
Yes it does get the value of first ID like you've said. I dont think this is not a duplicate question because it has a different content and problem itself. @Barmar but thanks — Taylor, Mar 17 '19 at 11:54
Did I misunderstand? What problem are you having other than getting the value of the radio button? — Barmar, Mar 17 '19 at 11:56
I do get the other values of the input type radio. The problem was the looping of other values of ID and doesn't display the other ID content from other row from the database. Do you think providing an image for it would help? @Barmar — Taylor, Mar 17 '19 at 11:59
@Barmar I think I experiencing my problems because of my JS codes. Sorry for causing you some trouble tho. Trying my best to explain it in english. Not an english speaker anyway. — Taylor, Mar 17 '19 at 12:06
The problem is that you're using the same IDs and input names in each iteration of the `while` loop. Since radio buttons are grouped by the name, you need to give them a different name for each question. — Barmar, Mar 17 '19 at 12:08
I displayed the unique IDs and dunno if im doing it right when it comes to its ajax. — Taylor, Mar 17 '19 at 12:10

Barmar · Accepted Answer · 2019-03-17T13:23:30.317

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

var id_question = $(this).closest('form').find('.number_id').val(); Helps me alot but shows an error; unidentified index of ID for $_POST['id']; — Taylor, Mar 17 '19 at 12:38
Oh ya and you duplicated the class on radio but its all fine. Thank you so much. — Taylor, Mar 17 '19 at 12:59
Right, I was changing `id` to `class`, but forgot that there was already a class. — Barmar, Mar 17 '19 at 13:23

OnChange AJAX seems complication with dynamic values

1 Answers1