How to get avg values from input boxes with list of records using javascript?

Question

Im a beginner of js... I want to show a list of students. With this, ppl can edit directly 2 values of grade in input box, and avg grade is auto caculate and inport to 3rd input box. I could do with 1 ppl, but 2 or more I dont know how to do. Could anyone help me?

This is my code: https://jsfiddle.net/sxxfrppo/

JS:

$(document).ready(function() {
  $('[id^=grade]').on('change', function() {
    var grade = 0;

    $('[id^=grade]').each(function(index) {

      grade += parseFloat($(this).val() ? $(this).val() : 0);
    });

    var avggrade = $('#avg').val(grade.toFixed(2)/2);

  });
});

Answer 1

Element.id should be unique in doucment . Substitute duplicate id s beginning with grade , and avg with className s at html . Use [class*=grade] selector to select all elements where grade is included in className , $(this).closest("tr") to select parent element where change event occurs.

You can also replace ternary $(this).val() ? $(this).val() : 0 $(this).val() ? $(this).val() : 0 with +this).value where + operator converts string .value of input element to number.

 $(document).ready(function() { var grades = $("[class*=grade]") grades.on("change", function() { var grade = 0; var tr = $(this).closest("tr"); $(grades, tr).each(function(index) { grade += +this.value; }); var avggrade = $(".avg", tr).val(grade.toFixed(2) / 2); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-striped table-bordered table-hover"> <thead class=""> <tr> <th width="40" class="text-center"> # </th> <th> Name </th> <th> Grade 1 </th> <th> Grade 2 </th> <th> AVG </th> </tr> </thead> <tbody> <tr> <td></td> <td> Luna </td> <td> <input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" /> </td> <td> <input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> </td> <td> <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> </td> </tr> <tr> <td></td> <td> John </td> <td> <input class="form-control text-right grade1" type="number" min="0" max="10" step="0.01" name="grade1" value="" /> </td> <td> <input class="form-control text-right grade2" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> </td> <td> <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> </td> </tr> </tbody> </table> 

jsfiddle https://jsfiddle.net/sxxfrppo/1/

Answer 2

Using so many id's makes it quite complicated. It will only get a lot harder when the number of rows are a lot more.

To make your code flexible, you should be using a class, and some basic jQuery selector functions like closest and find.

We can assign a class "grade" to all grade input boxes and a class "avg" to the average input box.

Refer to this: https://jsfiddle.net/czvf7L9f/9/

<tbody>
 <tr>
  <td></td>
  <td>
    Luna
  </td>
  <td>
    <input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade1" value="" />  <!-- Add grade class -->
  </td>
  <td>
    <input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> <!-- Add grade class -->
  </td>
  <td>
    <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> <!-- Add avg class -->
  </td>
</tr>
<tr>
  <td></td>
  <td>
    John
  </td>
  <td>
    <input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade1" value="" /> <!-- Add grade class -->
  </td>
  <td>
    <input class="form-control text-right grade" type="number" min="0" max="10" step="0.01" name="grade2" value="" /> <!-- Add grade class -->
  </td>
  <td>
    <input class="form-control text-right avg" type="number" min="0" max="10" step="0.01" name="avg" value="" /> <!-- Add avg class -->
  </td>
</tr>

$(function(){
   $(".grade").on("change", function() {
   var no_of_boxes = 0;
   var total = 0;
   $(this).closest('tr').find('.grade').each(function() {
       if ($(this).val()) {
         no_of_boxes++;
         total += parseFloat($(this).val())
       }
    });
    var avg = parseFloat(total/no_of_boxes);
    $(this).closest('tr').find('.avg').val(avg);
  });
});