вычисление двух полей ввода в третье поле ввода с несколькими строками таблицы в jquery

Question

Я делаю вычисления в третьем поле ввода на основе значения, заполненного в два поля ввода. И здесь у меня есть несколько строк. Расчет каждой строки должен выполняться отдельно, поэтому я использую каждую функцию. Но расчет не работает. Я новичок в Jquery, так где код не так ??

     <table>
        <tr>
        <th><?= __('Quantity Offered')?></th>
        <th><?= __('Offer Price')?></th>
        <th><?= __('Total Offer Price')?></th>
        </tr>
        <tr class="productNRow">
        <td><?php echo $this->Form->input("supplier_offer_products.0.qty_offered",['id'=>'qtyOffered']);?></td>
        <td><?php echo $this->Form->input("supplier_offer_products.0.offer_price",['id'=>'priceOffered']);?></td>
        </tr>
        <tr class="productNRow">
        <td><?php echo $this->Form->input("supplier_offer_products.1.qty_offered",['id'=>'qtyOffered']);?></td>
        <td><?php echo $this->Form->input("supplier_offer_products.1.offer_price",['id'=>'priceOffered']);?></td>
        </tr>
     </table>


 <script>
     $(document).ready(function(){
        $(".productNRow").each(function(){
           var sentRec = $(this);
           var total;
              $(this).find("#qtyOffered").on('change', function () {

                  var qty = $(sentRec).find("#qtyOffered").val();
                  var offer = $(sentRec).find("#priceOffered").val();
                  var total = qty * offer;
                  $('#totalOrder').val(total);

              });    

        }); 


});

Answer 1

Вы не можете иметь несколько идентификаторов.Используйте классы и добавьте недостающие элементы #totalOrder.
JQuery и PHP, которые могут выглядеть следующим образом:

jQuery(function( $ ) {

  $(".productNRow").each(function() {

    var $row = $(this);
    var $qty = $row.find(".qtyOffered"); // use classes! (see PHP too)
    var $prc = $row.find(".priceOffered");
    var $tot = $row.find(".totalOrder");

    $qty.on('input', function() {
      var qty = $(this).val();
      var offer = $prc.val();
      var total = qty * offer;
      $tot.val(total);
    });

  });


});

<table>
  <tr>
    <th>Quantity Offered</th>
    <th>Offer Price</th>
    <th>Total Offer Price</th>
  </tr>
  <tr class="productNRow">
    <td>
      <?php echo $this->Form->input("supplier_offer_products.0.qty_offered",['class'=>'qtyOffered']);?>
    </td>
    <td>
      <?php echo $this->Form->input("supplier_offer_products.0.offer_price",['class'=>'priceOffered']);?>
    </td>
    <td>
       <input class="totalOrder">
    </td>
  </tr>
  <tr class="productNRow">
    <td>
      <?php echo $this->Form->input("supplier_offer_products.1.qty_offered",['class'=>'qtyOffered']);?>
    </td>
    <td>
      <?php echo $this->Form->input("supplier_offer_products.1.offer_price",['class'=>'priceOffered']);?>
    </td>
    <td>
       <input class="totalOrder">
    </td>
  </tr>
</table>

или наоборот (вход → родитель → входы) безиспользуя метод .each()

jQuery(function( $ ) {

  $(".qtyOffered").on('input', function() {

    var $row = $(this).closest(".productNRow");
    var $prc = $row.find(".priceOffered");
    var $tot = $row.find(".totalOrder");

    var qty = $(this).val();
    var offer = $prc.val();
    var total = qty * offer; 
    $tot.val(total);

  });

});