0

I have a form where the user presses a button and dynamically generates a row of a table, which has 3 columns. Each generated row is added to the table and has the following form:

<tr id="1" class="">
  <td>
    <select id="cmb_articulo_1" name="articulo[]">
  </td>
  <td>
    <input type="text" id="txtcantidad_1" name="txtcantidad[]">
  </td>
  <td>
    <input type="text" id="txtprecio_1" name="txtprecio[]">
  </td>
  <td>
    <select id="cmb_descuento_1" name="descuento[]">
  </td>
</tr>

Each element of the generated row is added a sequential corresponding to the generated row (id="cmb_articulo_1", id="cmb_articulo_2", id="cmb_articulo_3",..)

The user may have generated n-rows and the problem is that I have not been able to determine how to identify in which select from which row an option was chosen and how to process that option.

How to process the chosen option, has to do with when, for example, I have a select with id = "combo", I can process the chosen option with $("#combo").change(function{ . . . }), But in the situation I raise, there may be 1, 2, 5, 10, 20, etc. rows created dynamically, so I can not process the chosen option as in the previous case. I understand that there must be a way to process the chosen option in a select of any row, making a dynamic reference of that element.

Please, can you help me with these two consultations ?, from now, thank you very much.

0

1 Answer 1

0

Add a class to all <select> elements in the table:

<select class="cmb_articulo" id="cmb_articulo_1" name="articulo[]">

Then use event delegation to be able to bind dynamically inserted elements:

$(document).on('change', '.cmb_articulo', function () {
  var $select = $(this);
  var $row = $select.closest('tr');
  var id = $row.attr('id');

  // You have the ID now, do whatever you need to.
});
3
  • Thank you very much for the contribution, it works perfectly. Something I forgot to mention is how to reference the remaining elements of the row in which the select option was chosen ?. I explain: Suppose the user generated 4 rows, with the row structure already mentioned in the query, and when you select the first select (items) of row 2, according to the chosen option, in the input text of the same row certain Data fetched from the database and in the second select from the same row (the latter) must be loaded with certain options brought from the database. I appreciate the help. Thank. Nov 13, 2016 at 22:45
  • 1
    @JuncoFuerte once you traverse up to the main repeating container like <tr> you use find() to look for anything inside that container instance. Will find it simpler to use common classes rather than ID's also. stackoverflow.com/documentation/jquery/1321/events/14028/…
    – charlietfl
    Nov 13, 2016 at 22:47
  • I have added to: $(document).on('change', '.cmb_articulo', function () { the following: var valor=$("#tabla tbody tr[id='idd']").find("td:eq(0)").find("select").val(); console.log(valor); }); but this is not working. In the console appears "undefined", if I remove the quotes tr [id = idd], in the console appears "undefined". If in the code I put tr [id = 4], and then I generate 4 rows and in the select of row 4 I select an element, in the console correctly appears the selected value, so I suppose that the way to put idd should be Different to accept a variable. Nov 14, 2016 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.