Adding keyup each input with jQuery

Question

I am confused on where to put the keyup since my code has multiple input fields.What i know is only putting a keyup in a single input considering my limited knowledge in javascript.Any of this input should automatically update the average column.Lastly it should auto calculate Total average.Hope anyone could help me here.Thank you!

Sample Table

Subject   | 1stG | secG | 3rdG |4thG | Average
  English     0      0      0      0      0   inputs here except for Average
  Psychology  0      0      0      0      0

Total Average value here...

HTML

    <tr>
       <th colspan="3">Subjects</th>
       <th colspan="2">First Grading</th>
       <th colspan="2">Second Grading</th>
       <th colspan="2">Third Grading</th>
       <th colspan="2">Fourth Grading</th>                                                                         
       <th>Average</th>
      </tr>
     </thead>   
     <tbody
     @foreach($update_card['AllGrade'] as $subject)
         {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
       <tr>
       <th colspan="3">{!! $subject->subject !!}</th>
       <td colspan="2">{!! Form::text('term_1[]',$subject->term_1,['class'=>'form-control','name[]'=>'term_1','id[]'=>'term_1','value'=>'']) !!}</td>
       <td colspan="2">{!! Form::text('term_2[]',$subject->term_2,['class'=>'form-control','name[]'=>'term_2','id[]'=>'term_2','value'=>'']) !!}</td>
       <td colspan="2">{!! Form::text('term_3[]',$subject->term_3,['class'=>'form-control','name[]'=>'term_3','id[]'=>'term_4','value'=>'']) !!}</td>
       <td colspan="2">{!! Form::text('term_4[]',$subject->term_4,['class'=>'form-control','name[]'=>'term_4','id[]'=>'term_4','value'=>'']) !!}</td>
        <td colspan="2" class="average" value=""> Average</td>
    </tr
  @endforeach
      <tr>
         <th colspan="11">Total Average:</th>
      <th>{!! Form::text('scholar_GPA',$update_card->scholar_GPA,['class'=>'form-control total-ave','name' => 'total-ave','id' => 'total-ave','value' => '']) !!}</th>
      </tr>

Script

<script type="text/javascript">
   $("tbody tr").each(function() {
            var total = 0;
            var ave = 0;
            var count = 1;


                $(this).children('td').not(':last').each(function () {//foreach of the column of the row
                //"this" is the current element in the loop
                var number = ($(this).children('input').length == 0) ? $(this).html() : $(this).children('input').first().val();

                total += parseInt(number);

                ave = total/count;
                     alert(number+'  '+total);
                      alert('td'+count);
                count++;

                });
                   alert('last'+ave);
                  $(this).children('td').last().html(ave);//loop the row

    });
 </script>

Answer 1

You are on the right track. Put a key up listener on each input but have it run the same function to update your average column. Hint: Your current function should be the function to run when there is any changes(recalculate).

If needed, check out this plunker but be sure to try yourself first!

https://plnkr.co/edit/0fJgNDty9OiW5KeBJbn8

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="script.js"></script>
<input type="text" value="0">
<input type="text" name="" id="" value="0" />
<p id="average">0</p>
<script>
function calculateAverage(){
    sum = 0
    $("input").each(function(){
        sum += parseInt($(this).val())
    })
    $("#average").text(sum)
} 
$("input").on("keyup", function(){
     calculateAverage()
})
</script>
</html>

Adding keyup each input with jQuery

Question

1 answers

solution1
0 ACCPTED 2017-04-27 02:51:07

Adding keyup each input with jQuery

Question

1 answers

solution1 0 ACCPTED 2017-04-27 02:51:07

solution1
0 ACCPTED 2017-04-27 02:51:07