PHP Quiz System - php

Question

I am working on a PHP Quiz System which displays all questions on one page.
The following is my code.
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);
}
Form
<?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>
What I want to do is, once the user select an answer for a questions, the selected option and few other hidden form data (qid, eid, sid) should be passed to updateAnswer.php
updateAnswer.php will update the selected answer to the database.
I tired the following jQuery. But it wont do anything.
<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>
The system should pass data to updateAnswer.php when a user clicks on an option(answer).
But with my current code, when a user clicks on an option won't do anything.

Answer 1

So, there are some mistakes in your code, first one is that the id should always be unique, so before your while loop take a variable and initialize it to zero and increment it on every iteration; You can use this variable and append after every id to make it unique. Like so -
<?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
}
?>
You also need to give this($i or question-id(whichever you choose)) as an attribute to radio buttons to identify which question id we need to get and on update function you need to pass the current checked element, like so -
<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 -->
I've created a working snippet for your problem(without PHP and AJAX of course). I've given them unique id and values, I'm printing the desired values on the console. I've changed the AJAX code as well, you can use it in your code to check if it works. Comments are mentioned wherever necessary, see if it helps you.
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>