PHP Система викторин

Question

Я работаю над системой PHP викторин, которая отображает все вопросы на одной странице.
Ниже приведен мой код.

PHP

$getQ = mysqli_query($condb, "select * from questions where eid = '$exam'");
        if($getQ){
            if(mysqli_num_rows($getQ)==0){
                $summaryLink = 'examSummary.php?exam='.$exam;
                redirect($summaryLink);
            }

Форма

<?php while($ans = mysqli_fetch_array($getQ)){  ?>
    <div class="ques" id="ques">
        <input type="hidden" name="exam" value="<?php echo $exam; ?>">
        <input type="hidden" name="question" value="<?php echo $token; ?>">
        <input type="hidden" name="qid" id="qid" value="<?php echo $ans['qid'];?>">
        <input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">   
    
        <p>
            <input type="radio" name="answer" value="1" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_1'];?>"><?php echo $ans['option_1'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="2" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_2'];?>"><?php echo $ans['option_2'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="3" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_3'];?>"><?php echo $ans['option_3'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="4" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_4'];?>"><?php echo $ans['option_4'];?></label>
        </p>
        <p>
            <input type="radio" name="answer" value="5" id="answer" onChange="update();">
            <label for="<?php echo $ans['option_5'];?>"><?php echo $ans['option_5'];?></label>
        </p>
        <div class="status2"></div>

Я хочу сделать следующее: когда пользователь выберет ответ на вопрос, выбранный вариант и несколько других скрытых данных формы ( qid, eid, sid) следует передать на updateAnswer.php
updateAnswer.php обновит выбранный ответ в базе.

Надоел следующий jQuery. Но он ничего не сделает.

<script>
    function update() {
     var radVal = $("input[type=radio][name=answer]:checked").val();    
        jQuery.ajax({
        url: "updateAnswer.php",
        data:'eid='+$("#eid").val()+'&sid='+$("#sid").val()+'&qid='+$("#qid").val()+'&answer='+$(radVal).val(),
        type: "POST",
        success:function(data){
        $(".status2").html(data);
        },
        error:function (){}
        });
    }
    </script>

Система должна передавать данные на updateAnswer.php, когда пользователь нажимает на опцию (ответ).

Но с моим текущим кодом, когда пользователь щелчки по опции ничего не сделают.

Answer 1

Итак, в вашем коде есть несколько ошибок, первая из них заключается в том, что id всегда должен быть уникальным, поэтому перед вашим while loop возьмите переменную и инициализируйте ее нулем, а increment - на каждом iteration ; Вы можете использовать эту переменную и добавлять после каждого id, чтобы сделать ее уникальной. Примерно так -

<?php 

$i = 0;

while(bla bla){

$i++;

?> 
    <!-- You can also use question id here ↓↓ which should be unique -->
    <input type="hidden" name="qid" id="<?php echo "qid".$i; ?>" value="<?php echo $ans['qid'];?>">
    <!-- session id will be the same  -->
    <input type="hidden" name="sid" id="sid" value="<?php echo $_SESSION['sid']; ?>">
    <!-- same for others  -->
<?php 

}

?>

Вам также необходимо указать это ($i или question-id (в зависимости от того, что вы выберете)) как от attribute до radio buttons, чтобы определить, какой идентификатор вопроса нам нужно получить. и на update function вам нужно передать текущий отмеченный элемент, например:

<input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="<?php echo $i; ?>">
<!-- same for others  -->

Я создал рабочий фрагмент для вашей проблемы (без PHP и AJAX, конечно). Я дал им уникальные id и values, я печатаю желаемые значения на console. Я также изменил код AJAX, вы можете использовать его в своем коде, чтобы проверить, работает ли он. Комментарии упоминаются везде, где это необходимо, посмотрите, поможет ли это вам.

function update(element) {
  
  let answer = $(element).val(); // get the value of checked element
  let id = $(element).attr('data-id'); // get id of the radio button clicked
  let eid = $('#eid').val(); // exam id will be same for all the questions
  let sid = $('#sid').val(); // session id will be same
  let qid = $('#qid' + id).val(); // get question id
  
  // send ajax request
  /*jQuery.ajax({
    url: "updateAnswer.php",
    data: 'eid=' + eid + '&sid=' + sid + '&qid=' + qid + '&answer=' + answer,
    type: "POST",
    success: function(data) {
      $('#status' + id).html(data); // show status on the related div
    },
    error: function() {}
  });*/
  console.clear();
  console.log(`id: ${id}, eid: ${eid}, sid: ${sid}, qid: ${qid}`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ques" id="ques1">
  <input type="hidden" name="exam" value="some_exam" id="some_exam">
  <input type="hidden" name="eid" value="some_examid" id="eid">
  <!-- question id 1 (use php) -->
  <input type="hidden" name="question" id="question1" value="question1">
  <input type="hidden" name="qid" id="qid1" value="qid1">
  <input type="hidden" name="sid" id="sid" value="some_session">

  <p>
    <!-- Give question id in data-id attribute (use php) and pass current element in update function -->
    <input type="radio" name="answer" value="1" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_1</label>
  </p>
  <p>
    <input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_2</label>
  </p>
  <p>
    <input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_3</label>
  </p>
  <p>
    <input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_4</label>
  </p>
  <p>
    <input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="1">
    <label>option_1_5</label>
  </p>
  <div class="status2" id="status1"></div>
  ---------------------------------------
  <!-- Second question starts (incremet i)-->
  ---------------------------------------
  <div class="ques" id="ques2">
    <input type="hidden" name="exam" value="some_exam" id="some_exam">
    <input type="hidden" name="eid" value="some_examid" id="eid">
    <input type="hidden" name="question" id="question2" value="question1">
    <input type="hidden" name="qid" id="qid2" value="qid2">
    <input type="hidden" name="sid" id="sid" value="some_session">

    <p>
      <input type="radio" name="answer" value="option_2_1" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_1</label>
    </p>
    <p>
      <input type="radio" name="answer" value="2" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_2</label>
    </p>
    <p>
      <input type="radio" name="answer" value="3" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_3</label>
    </p>
    <p>
      <input type="radio" name="answer" value="4" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_4</label>
    </p>
    <p>
      <input type="radio" name="answer" value="5" class="answer" onChange="update(this);" data-id="2">
      <label>option_2_5</label>
    </p>
    <div class="status2" id="status2"></div>