Add students' grades in Jquery or Javascript

Question

I need to make sure that when the administrator registers the user notes typed in the fields Nota1, Nota2, Nota3, Nota4 and Nota5, the values are counted individually, and if one of them exceeds 200 points, a message automatically appears stating that the value exceeded the allowed value (200 points). The list of users is coming from PHP, see:

<?php
....
$visualizar = '<table class="table">
                 <thead>
                   <tr>
                     <td>Aluno</td>
                     <td>Nota 1</td>
                     <td>Nota 2</td>
                     <td>Nota 3</td>
                     <td>Nota 4</td>
                     <td>Nota 5</td>
                   <tr>
             <tbody>';
while($pe = mysqli_fetch_object($sql))
{
   $visualizar .= '<tr>';
   $visualizar .= '<td><input type="text" name="Nome[]" class="form-control" value="'.$pe->NomeUsuario.'" readonly></td>'; 
   $visualizar .= '<td><input type="text" name="Nota1[]" class="form-control"></td>';
   $visualizar .= '<td><input type="text" name="Nota2[]" class="form-control"></td>';
   $visualizar .= '<td><input type="text" name="Nota3[]" class="form-control"></td>';
   $visualizar .= '<td><input type="text" name="Nota4[]" class="form-control"></td>';
   $visualizar .= '<td><input type="text" name="Nota5[]" class="form-control"></td>';
}
....

You can do this in Jquery or Javascript?

Answer 1

To identify each ROW, I would use an ID in your TR, so you could easily take the values by querySelector, I would also take the [] of the Names, this indicates a vector.

var nota1 = parseFloat(document.querySelector("#id input[name=Nota1]").innerText);
// ...
var notaN = parseFloat(document.querySelector("#id input[name=NotaN]").innerText);

//Faria isso até ter todas as notas e então a soma:
var Total = nota1 + nota2 + ... + notaN;

You will have to capture the note of each field, parse pro float and add.

On the validation of each field passing 200 you can use an onChange system and check if the value is > 200...

var nota1 = parseFloat(document.querySelector("#id input[name=Nota1]").innerText;
if(nota1 > 200) {
    // Use um alert ou algo para avisar
    alert("Valores não podem ser acima de 200");
    document.querySelector("#id input[name=Nota1]").focus();
}

Answer 2

Below my suggestion, starting with HTML:

<table class="table">
             <thead>
               <tr>
                 <td colspan="2">Aluno</td>
                 <tr>
                  <td>Nota 1</td>
                  <td><input type="text" name="nota1" value=""></td>
                 </tr>
                 <tr>
                  <td>Nota 2</td>
                  <td><input type="text" name="nota2" value=""></td>
                 </tr>
                 <tr>
                  <td>Nota 3</td>
                  <td><input type="text" name="nota3" value=""></td>
                 </tr>
                 <tr>
                  <td>Nota 4</td>
                  <td><input type="text" name="nota4" value=""></td>
                 </tr>
                 <tr>
                  <td>Nota 5</td>
                  <td><input type="text" name="nota5" value=""></td>
                 </tr>
                 <tr>
                  <td><button type=button onclick="soma()" >Somar</button></td>
                 </tr>
               <tr>
</table>
<p>Resultado: <span><span></p>

At the end of the HTML there is an element that will receive the total value of the sum of the notes inserted in the form, when the user clicks on the button "add".

This styling below is for viewing only:

tr{
  display:block;
}

td{
  outline:solid red 1px;
  padding:10px 30px;  
}

Finally the javascript code that will collect all the notes in the inputs, make the sum and print the result on the page. If the sum exceeds 200, the phrase "Total values above 200".

var nota= document.getElementsByTagName('span')[0];

var entrada = document.getElementsByTagName('input');

function soma(){
  total=0;
  for(i=0;i<entrada.length;i++){
    total+=Number(entrada[i].value);
  }
  if(total<=200){
    nota.innerHTML=total;
  } else{  
    nota.innerHTML="Total de notas acima de 200";
  }
}

To view the result click on https://codepen.io/anon/pen/vMKmed