Update elements inside a for using jquery

Question

Hello,

I’m starting out in web programming, and my question I think is simple, today I have a certain page containing a forech to display of for dynamic a list of an order

   <tbody>
                  <?php $i =0; foreach($itens as $item): ?>
                    <tr>
                      <td>
                        <?=  $item->item_id ?>
                      </td>
                      <td>
                        <?= $item->getNomeProduto($item->item_prod) ?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_vlruni" id="item_vlruni" value="<?= $item->item_vlruni?>" disabled/>
                          <input type="hidden" name="item_vlruni[]" value="<?= $item->item_vlruni?>" />
                          <?php }else echo  $item->item_vlruni  ;?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_qtd" id="item_qtd" min="<?= round($item->item_qtd*(1-($pedMagazine->maga_toleranciaperc/100)))?>" max="<?= round($item->item_qtd*(1+($pedMagazine->maga_toleranciaperc/100)))?>" onchange='sePedidoItem.somar();' step="1"
                          value="<?= $item->item_qtd?>" />
                          <input type="hidden" name="item_id[]" value="<?= $item->item_id?>" />
                          <?php }else {echo $item->item_qtd; }?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_vlrtot[]" id="item_vlrtot" value="<?= $item->item_vlrtot?>" disabled/>
                          <input type="hidden" name="item_vlrtot[]" value="<?= $item->item_vlrtot?>" />
                          <?php }else echo $item->item_vlrtot; ?>
                      </td>
                      <?php //$subTotal+=$item->item_vlrtot ;?>
                    </tr>
                    <?php $i++; endforeach;  ?>
                </tbody>

I am using jquery to update the vlrtotal fields (total value) which would be vlruni multiplication with Qtd, my function;

   somar: function () {        


     $("#vlrTot").val($("#qtd").val()*$("#vlrUni").val());
      $("#item_vlrtot[]").val($("#item_qtd").val()*$("#item_vlruni").val());},

Only that as I am using a foreach it is only updating the first field and the rest does not update.

Does anyone have any idea how to make it update all fields regardless of the size of the for?

Answer 1

Ciro, I see that you have a table with inputs for unitary value, quantity and total value.

The first problem I see is the repetition of ids in the elements. as the ids should be unique, consider changing the strategy used to name them, or even removing the id (in the above case it seems to me that this should not affect your application).

another point, I don’t see the need to have a input[type='hidden'] and input[type='number'] simultaneously. I believe that the input[type='hidden'] is only of interest if the maga_tolerancia == 1, or rather, use input[type='number'] for everything and just put readonly='readonly' in the inputs.

finally, add a class the line, we can do this to use the line (tr) as a scope for its operations, as well as classes for inputs.

<tbody>
  <?php $i =0; foreach($itens as $item): ?>
  <tr class="item">
    <td>
      <?=  $item->item_id ?>
    </td>
    <td>
      <?= $item->getNomeProduto($item->item_prod) ?>
    </td>
    <td>
      <input type="number" name="item_vlruni[]" class="item_vlruni" 
            value="<?= $item->item_vlruni?>" <?php if($pedMagazine->maga_tolerancia!=1){?>readonly='readonly' disabled='disabled'<?php }?>/>
    </td>
    <td>      
      <input type="number" name="item_qtd[]" class="item_qtd" step="1" 
            min="<?= round($item->item_qtd*(1-($pedMagazine->maga_toleranciaperc/100)))?>" 
            max="<?= round($item->item_qtd*(1+($pedMagazine->maga_toleranciaperc/100)))?>" 
            value="<?= $item->item_qtd?>" <?php if($pedMagazine->maga_tolerancia!=1){?>readonly='readonly' disabled='disabled'<?php }?> />
    </td>
    <td>
      <input type="number" name="item_vlrtot[]" class="item_vlrtot" 
            value="<?= $item->item_vlrtot?>" <?php if($pedMagazine->maga_tolerancia!=1){?>readonly='readonly' disabled='disabled'<?php }?>/>
    </td>
    <?php //$subTotal+=$item->item_vlrtot ;?>
  </tr>
  <?php $i++; endforeach;  ?>
</tbody>

note that I am not a programmer PHP, then there may be some basic error in the above suggestion.

now let’s go to the JavaScript.:

var itens = $('.item');
itens.each(function (indice) {
  var item = $(this);
  var item_vlruni = $(".item_vlruni", item);
  var item_qtd = $(".item_qtd", item);
  var item_vlrtot = $(".item_vlrtot", item);

  var onInput = function (event) {
    var vlruni = parseFloat(item_vlruni.val());
    var qtd = parseFloat(item_qtd.val());
    item_vlrtot.val(vlruni * qtd);
  }

  item_vlruni.on("input", onInput);
  item_qtd.on("input", onInput);  
});

Note that I added to class='item' à tr, I did this so that it was possible to select all the lines, then I go through each line selecting only the inputs inside them, for this I pass the line as second argument in the selector, as in the example $(".item_vlruni", item), finally do the bind of the event input, which is where the calculation will be carried out.

Answer 2

Thanks guys, I managed to realize what I really wanted the code was like this;

  <tbody>
                  <?php  foreach($itens as $key=>$item): ?>
                    <tr>
                      <td>
                        <?=  $item->item_id ?>
                      </td>
                      <td>
                        <?= $item->getNomeProduto($item->item_prod) ?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_vlruni" id="item_vlruni<?= $key ?>" value="<?= $item->item_vlruni?>" disabled/>
                          <input type="hidden" name="item_vlruni[]" value="<?= $item->item_vlruni?>" />
                          <?php }else echo  $item->item_vlruni  ;?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_qtd" id="item_qtd<?= $key ?>" min="<?= round($item->item_qtd*(1-($pedMagazine->maga_toleranciaperc/100)))?>" max="<?= round($item->item_qtd*(1+($pedMagazine->maga_toleranciaperc/100)))?>" onchange='sePedidoItem.somar(<?= $key ?>);' step="1"
                          value="<?= $item->item_qtd?>" />
                          <input type="hidden" name="item_id[]" value="<?= $item->item_qtd?>" />
                          <?php }else {echo $item->item_qtd; }?>
                      </td>
                      <td>
                        <?php  if($pedMagazine->maga_tolerancia==1){?>
                          <input type="number" name="item_vlrtot[]" id="item_vlrtot<?= $key ?>" value="<?= $item->item_vlrtot?>" disabled/>
                          <input type="hidden" name="item_vlrtot[]" value="<?= $item->item_vlrtot?>" />
                          <?php }else echo $item->item_vlrtot; ?>
                      </td>
                      <?php $subTotal+=$item->item_vlrtd ;?>
                    </tr>
                    <?php  endforeach;  ?>
                </tbody>

And in jquery it was like this

 somar: function (i) {

// soma para os itens editados no pedido
$('#vlrTot').val($('#qtd').val() * $('#vlrUni').val())

// logica para atualizar campos na tela confirmar 
var antigo = $('#item_vlrtot' + i).val()
// atualiza o campo vlrtot
$('#item_vlrtot' + i).val($('#item_qtd' + i).val() * $('#item_vlruni' + i).val())
var soma = $('#item_vlrtot' + i).val() - antigo
soma = soma + parseInt(document.getElementById('subTotal').textContent)
// atualiza valortotal
document.getElementById('subTotal').textContent = soma  },

Note that in my html I changed my foreach "oreach($items as $key=>$item)" and added to receive a value in the jquery’s summing function "add: Function (i) {" in the case of "i", so in onchange I call the function along with the key "onchange='sePedidoItem.add( $key "with the php tag");'" and I can perform the calculation dynamically.