Input text field with event in javascript and auto fill value in target element

Question

I have a problem in targetting the last th tag.In the fifth th, i put input type text.How to add event in this text field and the value of the last th(ave) should be updated automatically?Any help here is much appreciated.

<tr>                 
  <th colspan="3">Learning Areas</th>
  <th colspan="2">Term 1</th>
  <th colspan="2">Term 2</th>
  <th colspan="2">Term 3</th>
  <th colspan="2">Term 4</th>
  <th>Ave</th>
</tr>
</thead>
<tbody>
@foreach($card['AllGrade'] as $subject)
             {!! Form::hidden('grade_id[]',$subject['grade_id']) !!} 
    <tr>
        <th colspan="3">{!! $subject->subject !!}</th>
        <th colspan="2">{!! $subject->term_1 !!}</th>
        <th colspan="2">{!! $subject->term_2 !!}</th>
        <th colspan="2">{!! $subject->term_3 !!}</th>
        <th colspan="2"><input text="term_4" value="{!! $subject->term_4 !!}" 
              class="form-control" name="term_4"></th>

        <th colspan="2" name ="ave" id ="ave" value=""> total</th>


        </tr>
@endforeach


<script type="text/javascript">
$("tbody tr").each(function() {
    var total = 0;
    var ave = 0;
    var count = 1;
   $(this).children('th').not(':first').not(':last').each(function () {
    //"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;
    count++;
});
    $(this).children('th').last().html(ave);
});
</script>

please can you be more specific? what is your expected result? what exactly does not work? I tried it here and everything works fine: jsfiddle.net — ad_on_is
– ad_on_is, Commented Apr 20, 2017 at 22:06
sample table: Math 80 85 81 87 Total ave.After the inputting 87 and upon keyup the value of ave should be automatically change.How would i do that Sir? — Chee
– Chee, Commented Apr 21, 2017 at 0:47

Rüzgar · Accepted Answer · 2017-04-22 19:29:09Z

1

First things first. I don't know if there is a reason why you chose th, but the ones inside tbody should better be td like :

<td colspan="3">{!! $subject->subject !!}</td>

and later you can change this line from this

$(this).children('th').not(':first').not(':last').each(function () {

to

$(this).children('td').not(':first').not(':last').each(function () {

And now the last part

 function calculateAve() {
var aveValues = 0;
  $("tbody tr").each(function() {
    var total = 0;
    var ave = 0;
    var count = 1;
    $(this).children('td').not(':first').not(':last').each(function () {
    //"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;
    count++;
  });
    $(this).children('td').last().html(ave);
    aveValues = aveValues+ave;
  });
    $('#totalAve').html(aveValues/2);

}
calculateAve();
$('#myTable').on('keyup', 'input', function(){
 calculateAve();
});

table#myTable th {
    background: #8BC34A;
    color: #fff;
}
table#myTable, table#myTable td, table#myTable th {
    border: solid #efefef;
    border-collapse: collapse;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<table id="myTable">
		<thead>
			<tr>                 
				<th colspan="3">Subject</th>
				<th colspan="2">Term 1</th>
				<th colspan="2">Term 2</th>
				<th colspan="2">Term 3</th>
				<th colspan="2">Term 4</th>
				<th>Ave</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td colspan="3">Math</td>
				<td colspan="2">81</td>
				<td colspan="2">87</td>
				<td colspan="2">81</td>
				<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
				<td colspan="2" name ="ave" id ="ave" value=""> total</td>
			</tr>
			<tr>
				<td colspan="3">Science</td>
				<td colspan="2">89</td>
				<td colspan="2">83</td>
				<td colspan="2">81</td>
				<td colspan="2"><input text="term_4" value="80" class="form-control" name="term_4"></td>
				<td colspan="2" name ="ave" id ="ave" value=""> total</td>
			</tr>
			<tr>
				<td colspan="11">Total Average</td>
				<td id="totalAve" colspan="2"></td>
			</tr>
			</tbody>
		</table>

edited Apr 22, 2017 at 19:29

answered Apr 20, 2017 at 23:03

Rüzgar

9979 silver badges21 bronze badges

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

13 Comments

Chee Over a year ago

Sir Ruz, i use what you had suggested but the keyup didn't work.The value of ave did not change. What eq(4) input is for?

Chee Over a year ago

I put alert inside keyup but it seems it didn't work because it generate Uncaught TypeError: $(...).on is not a function

Chee Over a year ago

I'd change the version of jquery and now I've found out that it did not get the value of input.Instead of the values of td+td+td+td/4,the code only gets the td+td+td/4.So lacking value of the 4th td or no input included.

Chee Over a year ago

Update(but cannot make any changes to the Ave if user changes his/her input the second time arround):if('.form-control'){ $(this).on('keyup', 'td:eq( 4 ) input', function(){ $('.form-control').on("input", function() { var dInput = this.value; total += parseInt(dInput); ave = total/count-1; }); console.log(ave); $(this).parent().next().html(ave); }); } $(this).children('td').last().html(ave);

Rüzgar Over a year ago

Ok, now I get it. :) I will look and get back to you as soon as possible.

|

Collectives™ on Stack Overflow

Input text field with event in javascript and auto fill value in target element

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related