Get value of input within th tag using javascript

Question

How to get the value of th with input in html? My problem in the fifth th, it won't get the value of the input. See my javascript code. Anyone knows the idea of solving this problem? This code is fine but when I add input field inside th, it's not working. What did i miss here? Is there a possible way to achieve my goal? Note: I just need the input in the fifth th.

<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 = parseInt($(this).html());
        total += number;
        ave = total/count;
        count++;

    });
    $(this).children('th').last().html(ave);
});
</script>

Not sure how your html is ``. I would update the question with the rendered html. — Katrina, Apr 20 '17 at 14:52

score 0 · Accepted Answer · answered Apr 20 '17 at 15:02

0

In your var number = parseInt($(this).html());, you'll get literally the html code of your input, so you should access its value using other approach.

I think I'd do this instead:

$(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++;
});

It should work, as now you're accessing it properly.

answered Apr 20 '17 at 15:02

Thiago Cardoso

383
5
10

Yes Sir, this is what i want.If there is no data in term_4, how to add key event on input?Then the average will be updated right away.By the way thank you for this idea.It means a lot! – Chee Apr 20 '17 at 15:33
As you can see [here](http://stackoverflow.com/a/1207393/6560435), you need first to define a name to the input, and setup a bind to the `change` event – Thiago Cardoso Apr 20 '17 at 15:40
I'd made changes but the user can make a change on imput ones else it wont give a value in Ave column. Look this : 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); – Chee Apr 21 '17 at 03:31

Get value of input within th tag using javascript

1 Answers1