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>

Yes sir.If i input value on any of the input fileds,the Average colunm should update. — Chiloy
– Chiloy, Commented Apr 27, 2017 at 2:54

Minh Nguyen · Accepted Answer · 2017-04-27 02:51:07Z

3

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>

answered Apr 27, 2017 at 2:51

Minh Nguyen

1507 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chiloy Over a year ago

Ok Sir i will try it first.

Minh Nguyen Over a year ago

awesome! my example has only 2 inputs but you could definitely extended it to multiple inputs!

Chiloy Over a year ago

Any of the first input,the value of sum is NaN or even all fields has value, the value of average is always NaN.Why?

Chiloy Over a year ago

Though it is correct but why isn't not working with me?I've tried different versions of jquery but still no luck.

Minh Nguyen Over a year ago

sorry for the late response @chiloy. Could you put a plunkr up? And what would happen when you try to parseInt("")

Collectives™ on Stack Overflow

Adding keyup each input with jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related