nethken nethken - 4 months ago 22
PHP Question

Calculate when value change to the table

Hello i want to automatically calculate the grades when the value of the table change and put the total to grade. Can someone give me ideas how to do this? I don't know any of the events and i don't know how to use ajax. Can someone help me about this? I'm just starting to learn it.

Here some picture
enter image description here

my code

<!DOCTYPE html>
<html>
<head>

<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" type="img/png" href="img/gapclogo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.table-bordered{
width: auto !important;
margin-top: 200px;
}
</style>
</head>
<body>


<table class="table table-bordered" align="center" >

<thead>
<tr>
<th width="300">Name</th>
<th width="100">Long Quiz 20%</th>
<th width="100">Attendance 10%</th>
<th width="100">Homework/Seatwork 20%</th>
<th width="100">Recitation 10%</th>
<th width="100">Major Exam 40%</th>
<th width="100">Grade</th>
<th width="100">Equivalent</th>
<th width="100">Remarks</th>

</tr>
</thead>
<tbody>

<tr>
<td></td>
<td contenteditable="true" onchange="Calculate();" id="quiz"></td>
<td contenteditable="true" onchange="Calculate();" id="atten"></td>
<td contenteditable="true" onchange="Calculate();" id="home"></td>
<td contenteditable="true" onchange="Calculate();" id="reci"></td>
<td contenteditable="true" onchange="Calculate();" id="me"></td>
<td ></td>
<td ></td>
<td ></td>
</tr>

</tbody>
</table>


<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function Calculate()
{
quiz = document.getElementById('quiz');
attend = document.getElementById('atten');
home = document.getElementById('home');
reci = document.getElementById('reci');
me = document.getElementById('me');

q = quiz.value / 100 * 50 + 50;
a = atten.value / 100 * 50 + 50;
h = home.value / 100 * 50 + 50;
r = reci.value / 100 * 50 + 50;
m = me.value / 100 * 50 + 50;

qt = q * 0.2;
at = a * 0.1;
ht = h * 0.2;
rt = r * 0.1;
mt = m * 0.4;

grade = qt + at + ht + rt + mt;
}
</script>
</body>
</html>

Answer

First two changes : give an "id" to the <td> where you want to display the result, and replace the "onchange" event by "onkeydown" :

    <tr>
        <td></td>                       ▼
        <td contenteditable="true" onkeydown="Calculate();" id="quiz"></td>
        <td contenteditable="true" onkeydown="Calculate();" id="atten"></td>
        <td contenteditable="true" onkeydown="Calculate();" id="home"></td>
        <td contenteditable="true" onkeydown="Calculate();" id="reci"></td>
        <td contenteditable="true" onkeydown="Calculate();" id="me"></td>
        <td id="td_grade"></td>  ◄■■■■
        <td ></td>
        <td ></td>
    </tr>

Now let's change your "Calculate" function : you are editing <td> tags, so you have to use "innerHTML" instead of "value", and store the result in the "td_grade" :

function Calculate()
{
   quiz = document.getElementById('quiz');
    attend = document.getElementById('atten');
     home = document.getElementById('home');
    reci = document.getElementById('reci');
     me = document.getElementById('me');

 q = quiz.innerHTML / 100 * 50 + 50;      ◄■■■■■■■■■■■■■■■■■■■
 a = atten.innerHTML / 100 * 50 + 50;     ◄■■■■■■■■■■■■■■■■■■■
 h = home.innerHTML / 100 * 50 + 50;      ◄■■■■■■■■■■■■■■■■■■■
 r = reci.innerHTML / 100 * 50 + 50;      ◄■■■■■■■■■■■■■■■■■■■
 m = me.innerHTML / 100 * 50 + 50;        ◄■■■■■■■■■■■■■■■■■■■

 qt = q * 0.2;
 at = a * 0.1;
 ht = h * 0.2;
 rt = r * 0.1;
 mt = m * 0.4;

 grade = qt + at + ht + rt + mt;
 document.getElementById('td_grade').innerHTML = grade;       ◄■■■■■■■■■■■■■■■■■■■

}