Submitting looped values to database, one by one using ajax - php

Question

Am developing results management system where a lecturer can login and update students' results.
The system exacts all students offering that course unit and the lecturer updates the marks.
I discovered that it is very monotonous for a lecturer to click a button to submit results for each student yet they are very many students and very many buttons appearing on every student extracted, Then i thought of using AJAX to submit results on "ONCHANGE call event".
The simple AJAX script is working well only that , it is picking the last student in the loop and stores results in line with his id even if you try storing results for other students. It will just update results for the last students.
Here is my code for the looped students.
Marks.php
<?php
$row=mysql_fetch_assoc($sql);//course unit information
if(mysql_num_rows(mysql_query("SELECT * FROM allocations WHERE courseunitid='".$row['courseunitid']."' AND acid='".$_POST['acid']."' AND semester='".$_POST['semester']."' AND adminid='".$_SESSION['adminid']."'"))<1){
echo "<b><i><font color=red>Sorry! This course unit was not allocated to you in the specified search</font></i></b>";
}else{
echo"<hr size=1>";
echo "<table>
<tr>
<td colspan=4><b>UPDATE RESULTS OF BELOW STUDENTS</b></td>
</tr>
<tr>
<td><b>NO</b></td>
<td><b>REG NO</b></td>
<td><b>NAME</b></td>
<td><b>TEST</b></td>
<td><b>EXAMS</b></td>
</tr>
";
$x=1;
$sql_results=mysql_query("SELECT students.*,results.* FROM results INNER JOIN students ON results.stid=students.stid WHERE results.courseunitid='".$row['courseunitid']."' AND results.acid='".$_POST['acid']."' AND results.regsem='".$_POST['semester']."' AND results.adminid='".$_SESSION['adminid']."'");
while($rows=mysql_fetch_assoc($sql_results)){
?>
<tr><td><?php echo $x++?> . </td><td> <?php echo strtoupper($rows['regno']) ?></td><td><?php echo ucwords($rows['fname']).' '.ucwords($rows['mname']).' '.ucwords($rows['lname']) ?></td><td><input type='text' name='test' value='<?php echo $rows['test'] ?>' style='width:40px;height:26px' maxlength='2' onblur='enter_results("test",this.value)'></td><td><input type='text' maxlength='3' name='exams' value='<?php echo $rows['exams']?> ' style='width:40px;height:26px' onblur='enter_results("exams",this.value)'></td><td id='<?php echo $rows['stid']?>'><?php echo $rows['stid'] ?></td></tr>
<script>
//Ajax Script for picking values (Marks)
function enter_results(marksname,marksvalue){
if(marksname=='test'){
document.getElementById('<?php echo $rows['stid'] ?>').innerHTML="<font color=green><i>Saving test marks...</i></font>";
}else{
document.getElementById('<?php echo $rows['stid'] ?>').innerHTML="<font color=green><i>Saving exam marks...</i></font>";
}
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(xhttp.readyState==4 && xhttp.status==200){
if(marksname=='test' || marksname=='exams' ){
document.getElementById('<?php echo $rows['stid'] ?>').innerHTML=xhttp.responseText;
}
}
}
xhttp.open('GET','../ajax_calls/ajax_call.php?marksname='+marksname+'&marksvalue='+marksvalue+'&rid=<?php echo $rows['rid']?>',true);
xhttp.send();
}
</script>
<?php
}
echo "</table>";
?>

Answer 1

1st : Your creating multiple javascript function inside the while loop it was wrong approach . you need to create single function and call with dynamic parameter .
onblur='enter_results("test",this.value,"<?php echo $rows[\'stid\'] ?>","<?php echo $rows[\'rid\'] ?>")'>
Note: Added student id and row id as third and fourth parameter in function call .
PHP :
<hr size=1>
<table>
<tr>
<td colspan=4><b>UPDATE RESULTS OF BELOW STUDENTS</b></td>
</tr>
<tr>
<td><b>NO</b></td>
<td><b>REG NO</b></td>
<td><b>NAME</b></td>
<td><b>TEST</b></td>
<td><b>EXAMS</b></td>
</tr>
<?php
$x=1;
?>
//while loop start here
<tr>
<td><?php echo $x++?> . </td>
<td> <?php echo strtoupper($rows['regno']) ?></td>
<td><?php echo ucwords($rows['fname']).' '.ucwords($rows['mname']).' '.ucwords($rows['lname']) ?></td>
<td><input type='text' name='test' value='<?php echo $rows['test'] ?>' style='width:40px;height:26px' maxlength='2' onblur='enter_results("test",this.value,"<?php echo $rows[\'stid\'] ?>","<?php echo $rows[\'rid\'] ?>")'></td>
<td><input type='text' maxlength='3' name='exams' value='<?php echo $rows['exams']?> ' style='width:40px;height:26px' onblur='enter_results("exams",this.value)'></td>
<td id='<?php echo $rows['stid']?>'><?php echo $rows['stid'] ?></td>
</tr>
//while loop end here
</table>
Javascript : Script should be outside the while loop .
<script>
//Ajax Script for picking values (Marks)
function enter_results(marksname,marksvalue,stdid,rowid){
if(marksname=='test'){
document.getElementById(stdid).innerHTML="<font color=green><i>Saving test marks...</i></font>";
}else{
document.getElementById(stdid).innerHTML="<font color=green><i>Saving exam marks...</i></font>";
}
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if(xhttp.readyState==4 && xhttp.status==200){
if(marksname=='test' || marksname=='exams' ){
document.getElementById(stdid).innerHTML=xhttp.responseText;
}
}
}
xhttp.open('GET','../ajax_calls/ajax_call.php?marksname='+marksname+'&marksvalue='+marksvalue+'&rid='+rowid,true);
xhttp.send();
}
</script>