JQuery: on input event on dynamically created inputfields

Question

I am trying to add all values of a tablerow together. This as soon as someone enters a value into an inputfield. table:

<table>
  <thead>
    <tr>
    <th>
      Title
    </th>
    <th>
      Input
    </th>
    <th>
      Total
    </th>
    </tr>
  </thead>
  <tbody>
    <!-- Dynamially Generated Table Columns -->
    <tr>
      <td>Example</td>
      <td><input type="text" class="inputField" /></td>
      <td>Total: x</td>
    </tr>
  </tbody>
</table>

The only solution I've found so far is:

$(document).on('input', '.inputField', function(){ /* Do something */});

The Problem here is, that this line reads all input fields in the document, but I only want those of one row. Also if I'd change it to 'tbody' it would just read all fields of the tablebody.

So what I am looking for is a way to just select those inputs of one single tablerow, so I can take those values and add them together.

Thanks a lot for the help!

there's only one field in your example row, so "adding them all together" doesn't make sense. Are there multiple <input> elements within one <tr> in reality? — ADyson
– ADyson, Commented Aug 19, 2016 at 12:09

ADyson · Accepted Answer · 2016-08-19 12:14:32Z

This answer is assuming you mean there will be multiple <input> elements within the same <tr> in reality, and you want the total entered into all of these.

You can still use that event. But the key thing is within that event, to only select the inputs which fall within the current row. Since you know which element the event occurred on, you can use that information to find out its parent row, and therefore discover all the other input elements within that row. Something like this:

$(document).on('input', '.inputField', function(){ 
  var parentRow = $(this).parents("tr").first();
  var inputs = parentRow.find('input[type="text"]');
  var total = 0;
  inputs.each(function(){
    total += parseInt(this.value);
  });
  alert (total);
});

Bear in mind above I haven't included any validation of whether the input into the field is actually a valid integer or anything like that. It's worth considering that.

Further, if you want to write into the nearby <td> probably best to give that <td> a class e.g. class="total", then you can easily update it. So instead of

alert(total);

in the above example, you could write

parentRow.find(".total").text(total);

Thanks a lot, I had to change some stuff, but in the end it worked perfectly.

fernando · Accepted Answer · 2016-08-19 12:11:22Z

0

you can use .change for that

$('input[name=myInput]').change(function() { ... });

answered Aug 19, 2016 at 12:11

fernando

8201 gold badge9 silver badges24 bronze badges

2 Comments

Arron Over a year ago

This is considered to be the "old" and depreciated way of binding events, It is far better to use the "on()" method as it creates only one EventListener for all inputs together (instead of one for each)

Liam Over a year ago

Change is fine, it's not deprecated. If you inspect change it's just a wrapper for on() anyway. No need to switch from change to on.

Collectives™ on Stack Overflow

JQuery: on input event on dynamically created inputfields

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related