Jquery read value of dynamic input field

Question

I am looking for a way to read the value of an dynamically created input field and then get the average of them. I've got a tablerow with multiple inputs, and I want to add all values of those inputs together and show them at the end of the row.

What I got so far:

Html (I am generating such rows in my table):

<tr>
<td><input type='number' class='userInput' name='userInput'></td>
<td><input type='number' class='userInput' name='userInput'></td>
<td><input type='number' class='userInput' name='userInput'></td>
<td class='avg'>X</td> <!-- Average -->
</tr>

My jQuery code looks like this:

$(document).on('input', '.userInput', function () {
var parentRow = $(this).parents('td');
var inputs = parentRow.children('input');
var avgText = $(this).parents('tr').find('.avg');
var avg = 0;    
inputs.each(function () {
avg += parseInt(this.value);
});
avg /= 3;
avgText.text(avg);
});

My Problem with this code is, that it doesnt update the total, it just overwrites it when I write something into the second inputfield. So what I am looking for, is a way to just update the average.

Its already updating X value. What you want can't understand that ? — Rakesh Sojitra
– Rakesh Sojitra, Commented Sep 2, 2016 at 10:09
@RakeshSojitra It is updating it, but it does not take the value of all 3 input fields — Soyong
– Soyong, Commented Sep 2, 2016 at 14:05

ADyson · Accepted Answer · 2016-09-02 10:15:34Z

You're not selecting all the elements to find the average value.

These lines are the problem:

var parentRow = $(this).parents('td');
var inputs = parentRow.children('input');

The first line only selects the td immediately above the chosen input. Therefore its only child is the input that's been changed. The other inputs are ignored. So you then divide that single value by 3, meaning the final average is completely wrong.

This example is correct - we go all the way up to the <tr>, and then use .find() to get all the inputs within the <tr> (can't use children because it only goes down one level, so you'd just get the <td>s.

Also I've made it more flexible by dividing by the number of inputs, rather than a hard-coded value. So if you add more inputs to the row it'll automatically average those as well.

$(document).on('input', '.userInput', function () {
    var parentRow = $(this).parents('tr');
    var inputs = parentRow.find('input');
    var avgText = parentRow.find('.avg');
    var avg = 0;    
    inputs.each(function () {
        avg += parseInt(this.value);
    });
    avg /= inputs.length;
    avgText.text(avg);
});

Developer · Accepted Answer · 2016-09-02 10:21:12Z

Try this out - https://jsfiddle.net/mpy31eh7/

<table id="myTable">

  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td ><label class="avg"></label></td>
    <!-- Average -->
  </tr>
  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td class='avg'>X</td>
    <!-- Average -->
  </tr>
  <tr>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td>
      <input type='number' class='userInput' name='userInput'>
    </td>
    <td class='avg'>X</td>
    <!-- Average -->
  </tr>
</table>


$(document).ready(function() {

  $("input[type=number]", "#myTable").change(function() {

   var $parent = $(this).parents('tr');
   var allInputs = $("input[type=number]", $parent);
   var total = 0;

   $.each(allInputs, function(){
       total += $(this).val() === ''? +0 : +$(this).val();
   });

   $(".avg", $parent).text(total/3);

  });

});

Collectives™ on Stack Overflow

Jquery read value of dynamic input field

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related